Home > Web Front-end > JS Tutorial > body text

JS implements return to top special effects

大家讲道理
Release: 2016-11-10 14:33:57
Original
1198 people have browsed it

<input id="btn1" type="button" value="回到顶部" />
Copy after login
#btn1{position:fixed;bottom:10px;right:10px;}
Copy after login
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)
    }
}
Copy after login

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


source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!