Home  >  Article  >  Web Front-end  >  JS implements return to top special effects

JS implements return to top special effects

大家讲道理
大家讲道理Original
2016-11-10 14:33:571273browse

<input id="btn1" type="button" value="回到顶部" />
#btn1{position:fixed;bottom:10px;right:10px;}
window.onload=funcition(){
    var oBtn=document.getElementById("btn");
    var timer=null;
    //申明一个变量看是否为系统还是用户滚动
    var sBys=true;
    window.onscroll=funcition(){
        if(!sBys){
            clearInterval(timer);
        }
        sBys=false;
    }
    oBtn.onclick=funcition(){
       timer = setInterval(funcition(){
            //获取scrollTop
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            //当点击按钮回到顶部时计算缓冲速度
            var ispeed=Math.floor(-scrollTop/8);
            if(scrollTop==0){
                clearInterval(timer)
            }
            sBys=true;
            document.documentElement.scrollTop=document.body.scrollTop=scrollTop+ispeed;
        },30)
    }
}

Knowledge points: 1. The calculation speed (buffering) is rounded down

2. When scrollTop==0, the timer needs to be cleared

3. It is necessary to determine whether the user or js operates the scroll bar. If it is a user operation, Clear timer


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn