I'm using the Smooth-Scroll plugin from the following git - link.

It works great in places like navbar where I used it as follows:

<nav class="navbar">
    <ul>
        <li><a href="#initial">Home</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#service">Service</a></li>
        <li><a href="#end">end</a></li>
    </ul>
</nav>

<script>
    var scroll = new SmoothScroll('a[href*="#"]');
</script>

However, on the same screen, I have a search button inside a form and I had liked it to act as the navbar - I want that once the user clicks on the search button it will smooth-scroll to the next section.

My form looks like this and I tried the following:

<form method="POST" class="hiscore_query">
    <input type="text" placeholder="username" id="username" autocomplete="off">
    <button type="submit" href="#skills"><i class="fa fa-search"></i></button>
</form>

and I tried to change my js into:

<script>
    var scroll = new SmoothScroll('button[href*="#"]');
</script>

but nothing happens.

Is there any way to make that search button do that smooth scroll?

Thank you

CodePudding user response：

<button>s can't be used as links. Change <button type="submit" href="#skills"><i class="fa fa-search"></i></button> to <a href="#skills"><i class="fa fa-search"></i></a>.