Блог

Я использую плагин плавной прокрутки из следующей ссылки git.

Он отлично работает в таких местах, как navbar, где я использовал его следующим образом:

 <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>
 

Однако на том же экране у меня есть кнопка поиска внутри формы, и мне понравилось, что она действует как навигационная панель — я хочу, чтобы, как только пользователь нажмет на кнопку поиска, она будет плавно переходить к следующему разделу.

Моя форма выглядит так, и я попробовал следующее:

 <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>
 

и я попытался изменить свой js на:

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

но ничего не происходит.

Есть ли какой-нибудь способ заставить эту кнопку поиска выполнять плавную прокрутку?

Спасибо

<button> s нельзя использовать в качестве ссылок. Измените <button type="submit" href="#skills"><i class="fa fa-search"></i></button> на <a href="#skills"><i class="fa fa-search"></i></a> .