如何实现页面内锚点导航平滑滚动，仅用HTML或不依赖jQuery？

不需要引入jQuery，也不需要额外第三方依赖，两种方案都可以直接适配你现有的锚点代码： #

方案1：1行CSS实现（最简便，推荐） #

不需要修改你已有的HTML结构，只需要在全局CSS中给根元素添加scroll-behavior属性，所有同页锚点跳转就会自动应用平滑滚动效果：

html {
  scroll-behavior: smooth;
}

你现有的锚点代码无需任何改动即可生效：

<a href="#teste">导航链接</a>
<div id="teste">目标内容区块</div>

• 该方案由浏览器原生实现滚动动画，性能比JS模拟更好，适配所有现代浏览器。如果需要自定义滚动时长、缓动效果，再选择下面的JS方案。

方案2：原生JS实现（支持自定义配置） #

如果需要调整滚动行为、或者做更细粒度的控制，可以用原生JS绑定锚点点击事件，调用原生滚动API实现，不需要任何第三方库：

// 给所有页内锚点绑定平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认的瞬间跳转
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      target.scrollIntoView({
        behavior: 'smooth',
        block: 'start' // 滚动到目标元素顶部对齐视口，和默认锚点行为一致
      });
    }
  })
})

兼容性提示：上述两个方案在Chrome 61+、Firefox 36+、Safari 15.4+版本均已原生支持，覆盖绝大多数用户的使用场景。

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