在网页开发中，锚点定位是最常用的页面内导航功能之一，常用于长页面、目录导航、回到顶部按钮等场景。传统锚点跳转生硬突兀，而平滑滚动能大幅提升用户体验，让页面切换更流畅自然。
本文将从零讲解 HTML 原生锚点定位的实现，同时提供纯 CSS 平滑滚动、JavaScript 平滑滚动两种方案，覆盖所有开发场景，新手也能直接上手使用。
一、什么是 HTML 锚点定位？
锚点定位（Anchor Link），就是通过id 选择器，让页面快速跳转到指定元素位置的功能。
核心原理：
- 给目标元素设置一个唯一的
id属性； - 通过
<a>标签的href属性指向该id（格式：#id名）； - 点击链接，页面直接跳转到对应元素位置。
二、基础锚点定位实现（原生无动画）
1. 最简代码示例
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基础锚点定位</title>
<style>
/* 给页面加高度，方便测试滚动 */
.box { height: 800px; border: 1px solid #ccc; margin: 20px 0; padding: 20px; }
/* 导航固定在顶部，方便点击 */
.nav { position: fixed; top: 0; left: 0; width: 100%; background: #fff; padding: 10px; }
</style>
</head>
<body>
<!-- 锚点链接 -->
<div class="nav">
<a href="#part1" rel="external nofollow" rel="external nofollow" >跳转到第一部分</a> |
<a href="#part2" rel="external nofollow" rel="external nofollow" >跳转到第二部分</a> |
<a href="#part3" rel="external nofollow" rel="external nofollow" >跳转到第三部分</a>
</div>
<!-- 锚点目标元素（必须设置唯一id） -->
<div id="part1" class="box" style="margin-top: 60px;">
<h3>第一部分内容</h3>
<p>基础锚点定位，点击上方链接直接跳转</p>
</div>
<div id="part2" class="box">
<h3>第二部分内容</h3>
<p>这是第二个锚点位置</p>
</div>
<div id="part3" class="box">
<h3>第三部分内容</h3>
<p>这是第三个锚点位置</p>
</div>
</body>
</html>
2. 核心语法
- 链接：
<a href="#目标id" rel="external nofollow" >文字</a> - 目标：
<任意标签 id="目标id">内容</任意标签>
✅ 注意：
- 一个页面中
id必须唯一，不能重复； href中的#必须写，代表当前页面内定位；- 不支持跨页面锚点（跨页面格式：
页面地址.html#id）。
三、纯 CSS 实现平滑滚动（最简单方案）
基础锚点跳转是瞬间跳转，体验很差，CSS3 提供了原生属性
scroll-behavior: smooth，一行代码实现平滑滚动，无需写任何 JS，零成本上手。1. 实现代码
css
/* 全局开启平滑滚动（推荐） */
html {
scroll-behavior: smooth;
}
2. 完整示例
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS平滑滚动锚点</title>
<style>
/* 核心：一行代码实现平滑滚动 */
html { scroll-behavior: smooth; }
.nav { position: fixed; top: 0; width: 100%; background: #fff; padding: 10px; }
.box { height: 800px; border: 1px solid #ccc; margin: 20px 0; padding: 20px; }
</style>
</head>
<body>
<div class="nav">
<a href="#part1" rel="external nofollow" rel="external nofollow" >第一部分</a> | <a href="#part2" rel="external nofollow" rel="external nofollow" >第二部分</a> | <a href="#part3" rel="external nofollow" rel="external nofollow" >第三部分</a>
</div>
<div id="part1" class="box" style="margin-top:60px">第一部分（CSS平滑滚动）</div>
<div id="part2" class="box">第二部分</div>
<div id="part3" class="box">第三部分</div>
</body>
</html>
3. CSS 方案优缺点
✅ 优点：
- 代码极简，一行生效；
- 无 JS 依赖，性能更好；
- 兼容现代浏览器（Chrome/Firefox/Safari/Edge）。
❌ 缺点：
- 无法自定义滚动速度、动画曲线；
- 不兼容 IE 浏览器（IE 已淘汰，项目可忽略）。
四、JavaScript 实现平滑滚动（高度自定义）
如果需要控制滚动速度、添加回调函数、兼容特殊场景，推荐使用 JS 实现，灵活性拉满。
核心 API：
element.scrollIntoView()1. JS 基础写法
javascript
运行
document.querySelector('#目标id').scrollIntoView({
behavior: 'smooth' // 平滑滚动
});
2. 完整可复用示例
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JS平滑滚动锚点</title>
<style>
.nav { position: fixed; top: 0; width: 100%; background: #fff; padding: 10px; }
.box { height: 800px; border: 1px solid #ccc; margin: 20px 0; padding: 20px; }
/* 取消a标签默认样式 */
a { cursor: pointer; color: #0066cc; text-decoration: none; margin: 0 10px; }
</style>
</head>
<body>
<div class="nav">
<!-- 不使用href，用onclick绑定JS -->
<a onclick="scrollToTarget('part1')">第一部分</a>
<a onclick="scrollToTarget('part2')">第二部分</a>
<a onclick="scrollToTarget('part3')">第三部分</a>
</div>
<div id="part1" class="box" style="margin-top:60px">JS平滑滚动 - 可自定义参数</div>
<div id="part2" class="box">第二部分</div>
<div id="part3" class="box">第三部分</div>
<script>
// 封装平滑滚动函数（通用版）
function scrollToTarget(id) {
// 获取目标元素
const target = document.getElementById(id);
if (target) {
// 执行平滑滚动
target.scrollIntoView({
behavior: 'smooth', // 平滑：smooth / 瞬间：auto
block: 'start', // 对齐方式：顶部对齐
inline: 'nearest'
});
}
}
</script>
</body>
</html>
3. JS 高级配置参数
javascript
运行
target.scrollIntoView({
behavior: 'smooth', // 滚动模式：smooth（平滑）/ auto（瞬间）
block: 'start', // 垂直对齐：start（顶部）/ center（居中）/ end（底部）
inline: 'center' // 水平对齐
});
4. JS 方案优缺点
✅ 优点：
- 完全自定义滚动行为；
- 可添加逻辑判断、动画回调；
- 适合复杂交互场景。
❌ 缺点：
- 需要编写 JS 代码；
- 比 CSS 方案多一点性能开销（可忽略）。
五、实战：回到顶部按钮（最常用场景）
几乎所有网站都有回到顶部按钮，结合平滑滚动，直接给你成品代码！
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>回到顶部+平滑滚动</title>
<style>
/* 页面高度 */
body { height: 2000px; }
/* 回到顶部按钮样式 */
#backTop {
position: fixed;
bottom: 50px;
right: 30px;
width: 50px;
height: 50px;
background: #0066cc;
color: #fff;
text-align: center;
line-height: 50px;
border-radius: 50%;
cursor: pointer;
display: none; /* 默认隐藏 */
}
</style>
</head>
<body>
<h1>向下滚动查看按钮</h1>
<!-- 回到顶部按钮 -->
<div id="backTop" onclick="toTop()">顶部</div>
<script>
// 监听滚动，显示/隐藏按钮
window.onscroll = function() {
const backBtn = document.getElementById('backTop');
// 滚动距离大于300px显示按钮
if (document.documentElement.scrollTop > 300) {
backBtn.style.display = 'block';
} else {
backBtn.style.display = 'none';
}
};
// 平滑回到顶部
function toTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
</script>
</body>
</html>
六、方案对比与选择建议
表格
| 方案 | 代码量 | 自定义度 | 兼容性 | 适用场景 |
|---|---|---|---|---|
| 基础锚点 | 极低 | 无 | 全兼容 | 简单内部导航 |
| CSS 平滑滚动 | 一行 | 低 | 现代浏览器 | 快速开发、追求简洁 |
| JS 平滑滚动 | 中等 | 极高 | 全兼容 | 复杂交互、自定义动画 |
📌 推荐选择：
- 普通项目 → 纯 CSS 方案（最快最优）；
- 需要自定义动画 / 兼容 IE → JS 方案；
- 简单内部导航 → 基础锚点即可。
七、常见问题与解决方案
1. 锚点跳转被顶部固定导航栏遮挡？
给目标元素添加
padding-top 或使用 scroll-margin-top：css
/* 解决固定导航遮挡锚点问题 */
#target {
scroll-margin-top: 70px; /* 距离顶部70px，适配导航栏高度 */
}
2. 平滑滚动不生效？
- 检查是否写错
scroll-behavior: smooth； - 检查浏览器是否为最新版（不支持 IE）；
- JS 方案检查元素是否正确获取。
3. 锚点跳转后 URL 出现 #id？
JS 方案可以阻止默认行为，避免 URL 变化：
javascript
运行
function scrollToTarget(id, e) {
e.preventDefault(); // 阻止URL变化
// 其余滚动代码...
}
