1贴浙、通過a標(biāo)簽實現(xiàn)錨點牵署，將a標(biāo)簽的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() 方法讓當(dāng)前的元素滾動到瀏覽器窗口的可視區(qū)域內(nèi)磅摹。
語法：Element.scrollIntoView({behavior：'auto', block: 'start', inline: 'nearest'})
behavior （可選）：定義動畫過渡效果站宗， "auto"或 "smooth" 之一闸准。默認(rèn)為 "auto"。
block （可選）：定義垂直方向的對齊梢灭， "start", "center", "end", 或 "nearest"之一夷家。默認(rèn)為 "start"蒸其。
inline （可選）：定義水平方向的對齊， "start", "center", "end", 或 "nearest"之一库快。默認(rèn)為 "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()方法可以使界面滾動到給定元素的指定坐標(biāo)位置。
語法：
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'(默認(rèn)值)
}
<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
