在按钮上使用平滑滚动插件

Question

我正在使用来自以下 git - link.

的 Smooth-Scroll 插件

它在像导航栏这样的地方效果很好，我按如下方式使用它：

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

但什么也没发生。

有什么方法可以使搜索按钮平滑滚动吗？

谢谢

Answer 1

<button>s 不能用作链接。将 <button type="submit" href="#skills"><i class="fa fa-search"></i></button> 更改为 <a href="#skills"><i class="fa fa-search"></i></a>。

在按钮上使用平滑滚动插件

using smooth-scroll plugin on a button

html

javascript

smooth-scrolling