1、通过a标签实现锚点，将a标签的href属性取值为所要链接到的块的id选择器
缺点：它会改变url
<div>
<div>
<a href="#lightblue">lightblue</a>
<a href="#lightgreen">lightgreen</a>
<a href="#lightpink">lightpink</a>
<a href="#lightsalmon">lightsalmon</a>
</div>
<div id="lightblue"></div>
<div id="lightgreen"></div>
<div id="lightpink"></div>
<div id="lightsalmon"></div>
</div>
2、通过Element.scrollIntoView()
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。
语法：Element.scrollIntoView({behavior：'auto', block: 'start', inline: 'nearest'})
behavior （可选）：定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。
block （可选）：定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline （可选）：定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
<div class="box">
<ul>
<li>lightblue</li>
<li>lightgreen</li>
<li>lightpink</li>
<li>lightsalmon</li>
</ul>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
let list = document.querySelectorAll('li');
let divs = document.querySelectorAll('.box>div');
for (let i = 0, len = list.length; i < len; i++) {
list[i].onclick = function() {
divs[i].scrollIntoView({
block: 'start',
behavior: 'smooth',
inline: 'center'
});
};
}
</script>
注意：取决于其它元素的布局情况，此元素可能不会完全滚动到顶端或底端。
参考文档MDN
3、通过window.scrollTo()
window.scrollTo()方法可以使界面滚动到给定元素的指定坐标位置。
语法：
1、window.scrollTo(x-coord, y-coord)
x-coord：期望滚动到水平的位置
y-coord：期望滚动到垂直的位置
2、window.scrollTo(options)
options = {
top: y-coord,
left: x-coord,
behavior: 'smooth'(平滑滚动) || 'instant'(瞬间滚动) || 'auto'(默认值)
}
<div class="box">
<ul>
<li>lightblue</li>
<li>lightgreen</li>
<li>lightpink</li>
<li>lightsalmon</li>
</ul>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
let list = document.querySelectorAll('li');
let divs = document.querySelectorAll('.box>div');
for (let i = 0, len = list.length; i < len; i++) {
list[i].onclick = function() {
window.scrollTo({ // 如果滚动元素不是window，可替换成滚动的元素
top: divs[i].offsetTop,
behavior: 'smooth'
});
};
}
</script>
参考文档MDN
