js
//第一種方法
//(function pageScroll(){
// //把內(nèi)容滾動指定的像素數(shù)（第一個參數(shù)是向右滾動的像素數(shù)，第二個參數(shù)是向下滾動的像素數(shù)）
// window.scrollBy(0,-1000);
// //延時遞歸調(diào)用，模擬滾動向上效果
// scrollDelay=setTimeout('pageScroll',200);
// //獲取scrollTop值篮灼，聲明了DTD的標(biāo)準(zhǔn)網(wǎng)頁取document.documentElement.scrollTop，否則取document.body.scrollTop苍息；因為二者只有一個會生效，另一個就恒為0，所以取和值可以得到網(wǎng)頁的真正的scrollTop值
// var sTop=document.documentElement.scrollTop+document.body.scrollTop;
// //判斷當(dāng)頁面到達(dá)頂部竞思，取消延時代碼（否則頁面滾動到頂部會無法再向下正常瀏覽頁面）
// if(sTop==0){
// clearTimeout('scrollDelay');
// }
//})()
//第二種方法
window.onload=function(){
var topbtn=document.getElementById('js_goTop');
var timer=null;
//滾動條滾動時觸發(fā)
var isTop=true;
var clientHeight= document.documentElement.clientHeight;
window.onmousewheel=function(){
//獲取滾動條的距離和頂部高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop>=clientHeight){
topbtn.style.display='block';
}else{
topbtn.style.display='none';
}
if(!isTop){
clearInterval(timer);
}
isTop =false;
}
topbtn.onclick=function(){
//設(shè)置定時器
timer =setInterval(function(){
//獲取滾動條的距離和頂部高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollspeed = Math.floor(-osTop/9);
document.documentElement.scrollTop = document.body.scrollTop = osTop+scrollspeed;
isTop=true;
if(osTop===0){
clearInterval(timer);
}
},
20);
}
}
html
<a href="javascript:;" title="backTotop" class="backtop js_gotop" id="js_goTop"></a>
css
.backtop{
width: 40px;
height: 40px;
position: fixed;
right: 15px;
bottom: 30px;
background: url(pics/top_bg.png) no-repeat left top;
display: none;
}
.backtop:hover{
background: url(pics/top_bg.png) no-repeat left -40px;
}
