Wie erreicht man den Return-to-Top-Effekt in nativem JS? (ausführliche Erklärung)

In diesem Artikel erfahren Sie, wie Sie mit nativem JS den Return-to-Top-Effekt erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Ich habe mir kürzlich online ein Fall-Tutorial angesehen – Rückkehr zum Top-Effekt (native JS-Implementierung). Da dieser Effekt praktischer und nicht schwierig ist, habe ich ihn nach dem Lesen einmal umgesetzt. Der Effekt war ziemlich gut, also habe ich mir Notizen gemacht, falls ich ihn brauche!

<a href="javascript:;" id="btn" title="回到顶部"></a>

Dieses a-Tag wird verwendet, um den Link zurück nach oben zu implementieren, wobei href="javascript:;" verwendet wird, um das Standardverhalten des a-Tags zu verhindern, da wir ein Klickereignis auslösen möchten Lassen Sie die Bildlaufleiste nach oben zurückkehren, anstatt zur Seite zu springen. Wenn Sie es auf href=" setzen, springt es natürlich standardmäßig an den Anfang der Seite, aber die Benutzererfahrung ist relativ schlecht. Wir möchten hauptsächlich einen Entspannungseffekt erzielen. OK, legen wir den Stil für das a-Tag fest:

#btn {width:40px; height:40px; position:fixed; right:25px; bottom:10px; display:none; background:url(images/top_bg.png) no-repeat left top;}
#btn:hover {background:url(images/top_bg.png) no-repeat 0 -39px;}

Hier wird das a-Tag in der unteren rechten Ecke der Seite durch position:fixed fixiert. Die spezifische Position kann durch eine Feinabstimmung rechts und unten übergeben werden. Legen Sie das Hintergrundbild für das Tag fest, das Bild oben. Standardmäßig wird die obere Hälfte des Bildes angezeigt, also 40 x 40. Aufgrund der Bildgröße (40 x 80) kann die Hintergrundposition variieren direkt nach links oben gesetzt.

Und wenn wir auf der Seite scrollen und die Scrollhöhe größer ist als der sichtbare Bereich unseres Computers, wird das a-Tag hauptsächlich angezeigt mit JS, wie weiter unten gesagt wird!

Der schwebende Effekt des a-Tags ist eigentlich sehr einfach. Ändern Sie einfach die Position des Hintergrundbilds. Weitere Informationen finden Sie im CSS-Code oben.

Da nun der Stil der Schaltfläche „Zurück nach oben“ verfügbar ist, besteht der nächste Schritt darin, JS zu verwenden, um den Effekt des Zurückkehrens nach oben zu implementieren, wenn auf die Schaltfläche geklickt wird. Der Code lautet wie folgt:

window.onload = function(){
    var obtn = document.getElementById('btn');  //获取回到顶部按钮的ID
    var clientHeight = document.documentElement.clientHeight;   //获取可视区域的高度
    var timer = null; //定义一个定时器
    var isTop = true; //定义一个布尔值，用于判断是否到达顶部

    window.onscroll = function(){         //滚动条滚动事件

        //获取滚动条的滚动高度
        var osTop = document.documentElement.scrollTop || document.body.scrollTop; 

        if(osTop >= clientHeight){  //如果滚动高度大于可视区域高度，则显示回到顶部按钮
            obtn.style.display = 'block';
        }else{         //否则隐藏
            obtn.style.display = 'none';
        }

        //主要用于判断当 点击回到顶部按钮后 滚动条在回滚过程中，若手动滚动滚动条，则清除定时器
        if(!isTop){

            clearInterval(timer);
        }
        isTop = false;

    }

    obtn.onclick = function(){    //回到顶部按钮点击事件
        //设置一个定时器
        timer = setInterval(function(){
            //获取滚动条的滚动高度
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            //用于设置速度差，产生缓动的效果
            var speed = Math.floor(-osTop / 6);
            document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
            isTop =true;  //用于阻止滚动事件清除定时器
            if(osTop == 0){
                clearInterval(timer);
            }
        },30);
    }
}

Hier sind wir also. Der Effekt kann durch Zurückkehren nach oben erreicht werden. Sie können ihn im Browser abrufen, um ihn zu testen. Tatsächlich gibt es viele Möglichkeiten, den „Return to the Top“-Effekt zu erreichen. Hier ist nur ein Umsetzungsplan als Referenz!

Weitere Spezialeffektcodes für die Funktion „Zurück zum Anfang“ finden Sie unter: Zurück zum Top-CodeSpalte

[Verwandte Empfehlungen]

5 einfache Rückkehr nach oben Spezialeffektcodes (Sammlung)

HTML5 ausgewählte Spezialeffektcodefreigabe (Sammlung)

Empfohlen 5 nützliche Online-Floating-QQ-Kundendienstcodes zum kostenlosen Download (hohe Qualität)

Empfohlen 5 praktische und schöne Webseiten-Floating-QQ-Code-Spezialeffektcodes

Das obige ist der detaillierte Inhalt vonWie erreicht man den Return-to-Top-Effekt in nativem JS? (ausführliche Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!