无需 javascript，仅用语义化 html 锚点 + css `scroll-behavior: smooth` 即可实现点击导航链接后页面平滑滚动至目标区块，简洁高效且兼容现代浏览器。

在前端开发中，为单页应用（SPA）或长内容首页添加“回到顶部”“跳转至关于我们”等锚点导航功能，是提升用户体验的基础实践。传统做法常依赖 JavaScript 监听点击事件并调用 element.scrollIntoView()，但现代标准已提供更轻量、声明式的替代方案——原生平滑滚动（Native Smooth Scrolling）。

✅ 核心实现：ID 锚点 + css 全局滚动行为

关键在于两点：

• 目标区块使用 id（而非 class）作为唯一标识符 —— 因为 中的 # 语法仅匹配 id 属性；
• 全局启用平滑滚动行为 —— 通过 CSS 设置 html { scroll-behavior: smooth; }，作用于所有基于 # 的跳转。

示例代码如下：

/* 启用整页平滑滚动 */ html {   scroll-behavior: smooth; }  /* 可选：确保各区块有足够高度，便于视觉验证滚动效果 */ section {   min-height: 100vh;   padding: 2rem; }

   
   
欢迎来到我们的网站
 
  
   
关于我们
   
我们是一家致力于……
立即学习“前端免费学习笔记（深入）”；
 
  
   
联系我们
   
邮箱：hello@example.com
 

✅ 优势说明：该方案零 js 依赖，语义清晰，seo 友好，且自动支持浏览器前进/后退、地址栏手动输入 #aboutUs 等原生导航行为。

⚠️ 注意事项与兼容性提醒

• 浏览器支持：scroll-behavior 已被 chrome 61+、firefox 36+、edge 79+、safari 15.4+ 原生支持；如需兼容 Safari 15.3 及更早版本，可添加渐进增强处理（见下文）；
• ID 唯一性：确保每个 id 在页面中唯一，避免重复导致跳转异常；
• 无障碍访问：锚点跳转天然支持键盘 Tab 导航与屏幕阅读器，无需额外 ARIA 属性；
• 性能提示：避免在 scroll-behavior: smooth 同时大量触发 scroll 事件监听，因其本身已由浏览器优化。

? 进阶建议（可选）

若需兼容旧版 Safari 或自定义滚动时长/缓动函数，可结合 JavaScript 使用 scrollIntoView()：

document.querySelectorAll('a[href^="#"]').forEach(anchor => {   anchor.addEventListener('click', function (e) {     e.preventDefault();     const targetId = this.getAttribute('href').substring(1);     const targetEl = document.getElementById(targetId);     if (targetEl) {       targetEl.scrollIntoView({         behavior: 'smooth',         block: 'start'       });     }   }); });

但对绝大多数现代项目而言，纯 CSS 方案已足够健壮、简洁且可靠——优先用标准，而非绕路写 JS。

掌握这一技巧，你就能在几行代码内完成专业级页面内导航体验。