一、纯 html 实现
1.1 利用 id 为标记的锚点
这里作为锚点的标签可以是任意元素
<a href="#aa">跳转到 id 为 aa 标记的锚点</a> <p>-------------分隔线-------------</p> <div id="aa">a</div>
1.2 利用 a 标签的 name 属性作为锚点
这里作为锚点的标签只能是 a 标签
<a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a> <p>-------------分隔线-------------</p> <a name="bb">name 为 bb 的 a 标签的锚点</a> <div id="abb">bbb</div>
二、 js 实现
1. 利用 scrollTo()
window.scrollTo
滚动到文档中的某个坐标。可提供滑动效果
<a id="linkc">平滑滚动到 c</a> <p>-------------分隔线-------------</p>
<div id="cc">c</div>
var linkc = document.querySelector('#linkc')
var cc = document.querySelector('#cc')
function to(toEl) {
// toEl 为指定跳转到该位置的DOM节点
let bridge = toEl;
let body = document.body;
let height = 0;
// 计算该 DOM 节点到 body 顶部距离
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
// 滚动到指定位置
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});