JS實現回到Top(頂部)--JavaScript

當咱們瀏覽一段很長的網頁時，已經看到底部了，想回到頂部看前面的內容，但是須要滾動好幾轉鼠標滑輪或者拉動滾動條走好長「一段路」。這對於用戶來講，體驗效果是不夠好的。若是咱們藉助簡單的一個按鈕，點擊一下就能回到頂部，這會讓用戶省不少事，用戶體驗效果就很是好了。

注意編寫程序代碼時要解決以下問題：

一、這個按鈕如何佈局

二、JS如何解決點擊按鈕回到Top,且回到Top的用戶體驗最好

三、按鈕在怎樣的狀況下顯示

若是你沒有思路,不用擔憂,看完代碼實現後,你就明白了

一、案例主要的代碼

 demo.html:

<a href="javascript:" style="display: none" class="btn" id="btn" title="回到頂端">

<img src="images/GoTopColor.png"/>

</a>

comm.css:

*{margin: 0;padding: 0;}
div img{width: 100%;/*display: block*/}
.btn{
width: 50px;
height: 60px;
position: fixed;
bottom: 30px;
right: 5px;
}
.btn img{width: 100%;height: 100%;}
.btn:hover{
background-color: black;
}

comm.js:

/**

* Created by NIUXINLONG on 2017/9/3.
*/
window.onload = function () {
var topbtn = document.getElementById("btn");
var timer = null;
var screenHeight = document.documentElement.clientHeight;
window.onscroll = function () {
var backtop = document.body.scrollTop;
if(backtop >=screenHeight){
topbtn.style.display = "block";
}
else {
topbtn.style.display = "none";
}
};
topbtn.onclick = function () {
timer = setInterval(function () {
var backtop = document.body.scrollTop;
var speed = backtop/5;
document.body.scrollTop = backtop-speed;
if(backtop == 0){
clearInterval(timer);
}
},60);
}
};

二、案例效果圖

 

案例源文件：GoTOP.zip

本文系做者原創，轉載請註明出處，感謝合做！