頁面滾動到某個位置
阿新 • • 發佈：2020-08-10
1.錨點
使用錨點連結是一種簡單的返回頂部的功能實現。該實現主要在頁面頂部放置一個指定名稱的錨點連結，然後在頁面下方放置一個返回到該錨點的連結，使用者點選該連結即可返回到該錨點所在的頂部位置
<body style="height:2000px;">
<div id="topAnchor"></div>
<a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到頂部</a>
</body>
2.scrollTop
scrollTop屬性表示被隱藏在內容區域上方的畫素數。元素未滾動時，scrollTop的值為0，如果元素被垂直滾動了，scrollTop的值大於0，且表示元素上方不可見內容的畫素寬度
<body style="height:2000px;">
<button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button>
<script>
test.onclick = function(){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
</script>
</body>
3.scrollTo()
scrollTo(x,y)方法滾動當前window中顯示的文件，讓文件中由座標x和y指定的點位於顯示區域的左上角，設定scrollTo(0,0)可以實現回到頂部的效果
<body style="height:2000px;">
<button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button>
<script>
test.onclick = function(){
scrollTo(0,0);
}
</script>
</body>