返回顶部代码(亲测可用)

js

//第一种方法
//(function pageScroll(){
//  //把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数)
//  window.scrollBy(0,-1000);
//  //延时递归调用,模拟滚动向上效果
//  scrollDelay=setTimeout('pageScroll',200);
//  //获取scrollTop值,声明了DTD的标准网页取document.documentElement.scrollTop,否则取document.body.scrollTop;因为二者只有一个会生效,另一个就恒为0,所以取和值可以得到网页的真正的scrollTop值
//  var sTop=document.documentElement.scrollTop+document.body.scrollTop;
//  //判断当页面到达顶部,取消延时代码(否则页面滚动到顶部会无法再向下正常浏览页面)
//  if(sTop==0){
//      clearTimeout('scrollDelay');
//  }
//})()

//第二种方法
window.onload=function(){
    var topbtn=document.getElementById('js_goTop');
    var timer=null;
    //滚动条滚动时触发
    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(){
        //设置定时器
        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


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;
}

你可能感兴趣的:(返回顶部代码(亲测可用))