CSS实现单页网站导航栏点击按钮平滑滚动到对应区块的方法

核心实现逻辑 #

不需要引入JavaScript，仅依靠CSS原生的scroll-behavior属性即可实现，操作步骤如下：

• 第一步：全局添加滚动行为配置
  在你的CSS文件或者<style>标签中添加如下规则，作用于页面根元素：

html {
  scroll-behavior: smooth;
}

• 第二步：给目标跳转区块设置唯一ID
  给简历的每个内容区块设置对应id属性，示例如下：

<!-- 简历各内容区块 -->
<div id="about" class="section">关于我</div>
<div id="experience" class="section">工作经验</div>
<div id="skills" class="section">技能栈</div>
<div id="projects" class="section">项目经历</div>

• 第三步：导航栏锚点绑定
  导航栏的跳转按钮使用<a>标签，href属性填写对应区块ID，前面加#即可：

<!-- 导航栏 -->
<nav class="navbar">
  <a href="#about">关于我</a>
  <a href="#experience">工作经验</a>
  <a href="#skills">技能栈</a>
  <a href="#projects">项目经历</a>
</nav>

常用优化配置 #

如果你的导航栏是固定定位（滑动时悬浮在页面顶部），跳转后区块顶部会被导航栏遮挡，可以给目标区块添加scroll-margin-top属性解决：

/* 假设导航栏固定高度为60px，额外留10px边距更美观 */
.section {
  scroll-margin-top: 70px;
}

兼容性说明 #

scroll-behavior: smooth对所有现代主流浏览器（Chrome 61+、Firefox 36+、Safari 15.4+、Edge 79+）都已原生支持，完全满足个人简历类页面的使用需求。

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