如何让表单内的搜索按钮支持Smooth-Scroll平滑跳转效果

问题核心原因 #

1. HTML 规范中 <button> 本身不支持 href 属性，你给按钮加的 href 属于无效自定义属性，Smooth Scroll 插件的默认选择器逻辑无法读取到该属性值
2. 当前按钮的 type="submit"，点击后会默认触发表单提交行为，页面会刷新/跳转，自然无法触发滚动效果

方案1：替换为带按钮样式的<a>标签（最简便，无需修改原有初始化逻辑） #

直接把表单内的按钮替换为<a>标签，保留原有按钮样式即可，原有的a[href*="#"]选择器可以直接识别该元素：

<form method="POST" class="hiscore_query">
    <input type="text" placeholder="用户名" id="username" autocomplete="off">
    <!-- 替换为a标签，添加原按钮的样式类保持视觉效果不变 -->
    <a href="#skills" class="your-button-class-name">
        <i class="fa fa-search"></i>
    </a>
</form>

JS 初始化代码保留你最开始的配置即可：

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

如果需要保留表单提交逻辑，给该<a>标签额外绑定点击事件触发表单提交即可。

方案2：必须保留<button>标签的实现方式 #

通过插件提供的手动滚动API实现，先取消按钮默认提交行为，再绑定点击事件手动触发滚动：

修改后的表单代码

<form method="POST" class="hiscore_query">
    <input type="text" placeholder="用户名" id="username" autocomplete="off">
    <!-- 把type改为button取消默认提交，用data属性存储要滚动到的锚点 -->
    <button type="button" data-scroll-target="#skills">
        <i class="fa fa-search"></i>
    </button>
</form>

修改后的JS代码

// 保留原有导航锚点的初始化逻辑
var scroll = new SmoothScroll('a[href*="#"]');
// 给按钮绑定点击事件手动触发滚动
document.querySelector('button[data-scroll-target]').addEventListener('click', function () {
    const targetAnchor = this.getAttribute('data-scroll-target');
    // 调用插件内置的手动滚动方法
    scroll.animateScroll(targetAnchor);
    // 如果需要提交表单，在这里添加表单提交逻辑即可：
    // document.querySelector('.hiscore_query').submit();
});

内容的提问来源于stack exchange，提问作者Ben