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

JS implementiert „Return to Top'-Spezialeffekte

大家讲道理
大家讲道理Original
2016-11-10 14:33:571287Durchsuche

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

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


Stellungnahme:
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