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

Question

我正在使用来自以下 git -链接的 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>不能用作链接。 <button type="submit" href="#skills"><i class="fa fa-search"></i></button>更改为<a href="#skills"><i class="fa fa-search"></i></a> 。