實(shí)現(xiàn)回到頂部，先快后慢，在回到頂部過程中可以滾動滾輪打斷回到頂部過程。
回到頂部按鈕在第二屏才會出現(xiàn)，回到第一屏消失。
<!DOCTYPE html>
<!--實(shí)現(xiàn)回到頂部，先快后慢，在回到頂部過程中可以滾動滾輪打斷回到頂部過程。-->
<!--回到頂部按鈕在第二屏才會出現(xiàn)，回到第一屏消失。-->
<html>
<head>
<meta charset="utf-8">
<title>回到頂部實(shí)例</title>
</head>
<script type="text/javascript">
window.onload = function(){
var obtn = document.getElementById('btn');
var clientHeight = document.documentElement.clientHeight;
var timer = null;
var isTop = true;
//滾動條滾動時觸發(fā)
window.onscroll=function() {
var osTop = document.documentElement.scrollTop||document.body.scrollTop;
if (osTop>clientHeight) {
obtn.style.display ='block';
}else{
obtn.style.display = 'none';
}
if (!isTop) {
clearInterval(timer);
}
isTop=false;
}
//點(diǎn)擊返回頂部按鈕觸發(fā)
obtn.onclick = function(){
clearInterval(timer);
timer =setInterval(function(){
var osTop = document.documentElement.scrollTop||document.body.scrollTop;
var ispeed = Math.floor(-osTop/7);//對浮點(diǎn)數(shù)向下取整，小于或者等于該參數(shù)的最大整數(shù)。
document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
isTop=true;
console.log(osTop);
if (osTop==0) {
clearInterval(timer);
}
},30)
}
}
</script>
<style>
body
{
background-color: lightblue;
height: 7001px;
}
a
{
position: fixed;
right: 20px;
bottom: 20px;
display: none;
}
</style>
<body>
<a href="javascript:;" id="btn">回到頂部</a>
</body>
</html>