CSS实现单页平滑滚动效果教程

注意几个细节：

• ID 值不能以数字开头（如 id="1-section" 在部分浏览器中不可靠），建议用 id="section-1"
• ID 必须全局唯一；重复 ID 会导致跳转目标不确定
• 如果目标元素是动态插入的（如 Vue/React 渲染后），需确保它挂载完成后再触发跳转，否则可能滚动到页面顶部

如何兼容不支持 scroll-behavior 的旧浏览器

IE 完全不支持 scroll-behavior，Safari 在 iOS 15.4 之前也不支持。纯 CSS 方案失效时，得降级到 JavaScript。

最小可用 JS 替代方案（不用框架）：

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    const hash = this.getAttribute('href');
    if (hash === '#') return;
    const target = document.querySelector(hash);
    if (target) {
      e.preventDefault();
      target.scrollIntoView({ behavior: 'smooth' });
    }
  });
});

关键点：

• 监听的是所有以 # 开头的 href，不是只监听导航栏链接
• 用 scrollIntoView({ behavior: 'smooth' })，不是 window.scrollTo() —— 后者需要手动计算偏移，且兼容性更差
• 务必加 e.preventDefault()，否则会触发两次滚动（一次 JS，一次原生锚点）

滚动后 URL 哈希变化但不触发页面重载，是否影响 SEO 或路由

不会。哈希变化（#section2）属于前端路由范畴，不向服务器发起请求，搜索引擎爬虫通常忽略哈希片段，也不会因此重复索引内容。

但要注意：

• 单页应用（如 React Router）若用了 HashRouter，需避免和原生锚点混用，否则可能冲突或丢失状态
• 用户点击后退/前进按钮，浏览器仍会按哈希历史记录切换，这是预期行为，无需额外处理
• 如果想监听哈希变化做其他事（比如高亮当前导航项），用 window.addEventListener('hashchange', ...) 即可

本篇关于《CSS实现单页平滑滚动效果教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！