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

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM