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

作者: HarryPang | 来源:发表于2017-04-18 17:19 被阅读105次

    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

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

    相关文章

      网友评论

      • d93fcad66401:IE8:这是啥,我怎么不太认识
        HarryPang:@JS_Potato 哈哈哈哈,ie这种逆天,能吓跑一堆学习的人

      本文标题:返回顶部代码(亲测可用)

      本文链接:https://www.haomeiwen.com/subject/ephqzttx.html