JS回到顶部按钮

HTML:

<input type="button" value="回到顶部" id="btn1" />

CSS:

*{
    margin: 0;
    padding: 0;
}
#btn1{
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 10px 20px;
}

JS:

window.onload=function(){
    var oBnt = document.getElementById('btn1');
    var timer = null;
    var bSys = true;

    /* 检测是否为用户滚动或者为系统自身滚动 */
    window.onscroll=function(){
        if(!bSys){
            clearInterval(timer);
        }
        bSys=false;
    }

    oBnt.onclick=function(){
        timer = setInterval(function(){
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var iSpeed = Math.floor((-scrollTop/8));

            if(scrollTop == 0){
                clearInterval(timer);
            }
            bSys = true;
            document.documentElement.scrollTop = document.body.scrollTop = scrollTop+iSpeed;
        },30)
    }
}

 

 

posted @ 2013-12-06 23:46  白小虫  阅读(5701)  评论(0编辑  收藏  举报