當我們瀏覽一段很長的網頁時，已經看到底部了，想回到頂部看前面的內容，可是需要滾動好幾轉鼠標滑輪或者拉動滾動條走好長“一段路”。這對於用戶來說，體驗效果是不夠好的。如果我們借助簡單的一個按鈕，點擊一下就能回到頂部，這會讓用戶省很多事，用戶體驗效果就非常好了。
注意編寫程序代碼時要解決如下問題：
1、這個按鈕如何布局
2、JS如何解決點擊按鈕回到Top,且回到Top的用戶體驗最好
3、按鈕在怎樣的情況下顯示
如果你沒有思路,不用擔心,看完代碼實現后,你就明白了
1、案例主要的代碼
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);
}
};
2、案例效果圖
