JS實現返回頂部最佳的效果
阿新 • • 發佈：2019-01-07
今天看了很多頁面中返回頂部效果，發現有2種方式是比較容易理解記憶的。
一、利用scrollTop=0達到返回頂部的效果
//當點選toTop元素時，跳轉到頂上
toTop.onclick = function () {
if (document.documentElement) {
document.documentElement.scrollTop = 0;
} else{
document.body.scrollTop = 0;
}
}二、利用scrollTo(0,0)達到返回頂部的效果
//當點選toTop元素時，跳轉到頂上 toTop.onclick=function () { scrollTo(0,0) }
另外還有一種比較常見的就是設定錨點，但是這種方式位址列連結裡會出現#號。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>錨點返回頂部</title> <style type="text/css"> .cont{ height: 2000px; } </style> </head> <body> <div id='toTop'>頭部</div> <div class="cont"> 我要把內容撐起來 </div> <a href="#toTop">返回頂部</a> </body> </html>