隨着網站的不斷發展，需要展示的內容也越來越豐富，這導致網頁上能展示的內容越來越多。當內容堆積影響了用戶體驗，就需考慮如何提升用戶體驗。在這一系列的改動中，“回到頂部”的功能成為了一個經典。
1.頁面布局
(1) 我們先簡單的搭建一個長度為1200px的頁面，保證視口的高度足夠。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width,user-scalable=no" name="viewport" /> <title>Back to top</title> <style type="text/css"> #content { height: 1200px;} .text_center { text-align: center;} </style> </head> <body> <div id="content"> <div class="text_center">往下拉喲</div><br /> <div class="text_center">↓</div><br /> <div class="text_center">↓</div><br /> <div class="text_center">↓</div><br /> <div class="text_center">↓</div><br /> <div class="text_center">↓</div> </div> </body> </html>
(2) 然后我們准備一張圖片作為返回頂部的按鈕：
(3) 接着，我們把按鈕放到網頁上去：
HTML代碼：
<body> ... <a id="btnTop" class="btnTop" href="javascript:;" title="Back to top"> <img src="img/o_to_Top.png" class="imageTop"> </a> </body>
CSS代碼：
.btnTop { position: fixed; right: 2%; bottom: 2%; cursor: pointer; opacity: .7; z-index: 9; } .btnTop:hover { opacity: 1;} .imageTop { height: 72px; height: 72px;}
現在的顯示效果：
2.添加JS實現效果
原理：通過控制當前視口頂端的數值來實現
效果：返回頂部按鈕默認不顯示，當向下滑動到一定距離時顯示。點擊按鈕后，當前頁面由快到慢地返回頁面頂部。
實現：
我們先讓返回頁面按鈕默認不顯示：
<a id="btnTop" style="display:none;" ...
然后，我們新建JavaScript文件並引用，具體功能實現代碼如下，應該備注的比較詳細：
window.onload = function(){ var btnTop = document.getElementById("btnTop"); var timer = null; window.onscroll = function(){ var backTop = getScrollTop(); if(backTop >= 20){ //當前視口頂端大於等於20時，顯示返回頂部的按鈕 btnTop.style.display = "block"; }else { btnTop.style.display = "none"; } }; btnTop.onclick = function(){ //定時執行 timer = setInterval(function(){ var backTop = getScrollTop(); var speedTop = backTop / 10; //修改當前視口的數值，產生向上活動的效果 setScrollTop(backTop - speedTop); if(backTop == 0){ //結束函數執行 clearInterval(timer); } },30); }; //獲取當前視口的頂端數值 var getScrollTop = function(){ var sTop ; if (document.compatMode == "BackCompat") { sTop = document.body.scrollTop; } else { //document.compatMode == \"CSS1Compat\" sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop; } return sTop; }; //設置當前視口的頂端數值 var setScrollTop = function(top){ if (document.compatMode == "BackCompat") { document.body.scrollTop = top; } else { if(document.documentElement.scrollTop == 0){ document.body.scrollTop = top; }else{ document.documentElement.scrollTop = top; } } } };
現在的效果如下：
