Heim > Web-Frontend > js-Tutorial > JS implementiert „Return to Top'-Spezialeffekte

JS implementiert „Return to Top'-Spezialeffekte

大家讲道理
Freigeben: 2016-11-10 14:33:57
Original
1295 Leute haben es durchsucht

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

Wissenspunkte: 1. Berechnungsgeschwindigkeit (Pufferung) wird abgerundet

2. Wenn scrollTop==0, muss der Timer gelöscht werden

3. Es muss festgestellt werden, ob der Benutzer oder js die Bildlaufleiste bedient. Wenn es sich um eine Benutzeroperation handelt, löschen Sie den Timer


Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage