JavaScript imitiert den Taobao-Return-to-top-Effekt (Codebeispiel)

Was Ihnen dieser Artikel bringt, ist der JavaScript-Imitations-Taobao-Return-to-the-Top-Effekt (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Anforderung: Wenn die Bildlaufleiste eine bestimmte Position erreicht, wird die Seitenleiste an einer bestimmten Position fixiert, und wenn die Bildlaufleiste bis zu einer bestimmten Position nach unten geschoben wird , die Schaltfläche „Zurück zum Anfang“ wird angezeigt. Nachdem Sie auf die Schaltfläche geklickt haben, wird die Seite dynamisch nach oben verschoben, von schnell nach langsam.

Ideen:

1 Der js-Code kann erst ausgeführt werden, wenn die Seite geladen ist

Sie können js hinzufügen. Der Code wird unten geschrieben (so gelangen Sie zurück zum oberen Beispiel)

Wenn Sie ihn oben schreiben möchten, können Sie ihn verwenden die folgenden zwei Typen:

　 ①window.onload = function() {...}

　 ②window.addEventListener('load', function () {...})

2. Holen Sie sich die Elemente, die Sie benötigen

3. Binden Sie die Scroll-Ereignisrolle

Wenn der Benutzer zum Bannermodul scrollt. Fixieren Sie die Seitenleiste

if(window.pageYOffset >= bannerTop) {    // window.pageYOffset 屏幕被滚上去的距离
    sliderbar.style.position = 'fixed';   // 当用户滚到banner模块时使侧边栏变为固定状态
    sliderbar.style.top = sliderbarTop + 'px'; 
} else {
    sliderbar.style.position = 'absolute';
    sliderbar.style.top = '300px';
}

Zeigen Sie die Schaltfläche „Zurück nach oben“ an, wenn der Benutzer zum Hauptmodul scrollt

 if(window.pageYOffset >= mainTop) {    // 当用户滚到main模块时显示返回顶部按钮
     goBack.style.display = 'block';
 } else {
     goBack.style.display = 'none';
 }

4. Bind click Event click

Nachdem Sie auf die Schaltfläche „Zurück zum Anfang“ geklickt haben, wird die Seite dynamisch nach oben verschoben, von schnell nach oben langsam

 sliderbar.addEventListener('click', function() {
     animate(window, 0);
 })

5. Über die Animationsfunktion animate(obj, target, callback)

Hier ist das obj-Objekt das Fenster Ziel Zielposition ist 0; Rückruf ist eine Rückruffunktion. Wenn keine Parameter übergeben werden, kann sie ignoriert werden

Setzen Sie einen Timer setInterval();

Deklarieren Sie einen Schritt als Schrittwert. Der Wert liegt zwischen der oberen Position und der aktuellen Position der Bildlaufleiste. Teilen Sie die Differenz durch 10 (der Schritt wird immer kleiner und die Bildlaufgeschwindigkeit wird immer langsamer). (Bildlaufleiste verschiebt sich von schnell nach langsam)

var step = (target - window.pageYOffset) / 10;

Schritt ist jedoch nicht immer eine Ganzzahl. Wenn Schritt keine Ganzzahl ist, können Sie die Bildlaufleiste ein wenig vorwärts bewegen. Die Bildlaufleiste kann nach oben und unten verschoben werden, sodass der Schritt größer als Null oder kleiner als Null sein kann. Wenn größer als Null, runden Sie auf, wenn kleiner als Null, runden Sie ab 🎜>Der Timer wird jedes Mal aufgerufen. Die Funktion wird ein wenig nach oben verschoben

step = step > 0 ? Math.ceil(step) : Math.floor(step);

, um festzustellen, ob die Animation abgeschlossen ist. Wenn sie abgeschlossen ist, schließen Sie den Timer clearInterval();

window.scroll(0, window.pageYOffset + step);

Details Der Code lautet wie folgt:

if(window.pageYOffset == target) {  // 当页面回到顶部后(即动画执行完) 清除定时器
    clearInterval(obj.timer);
    //  判断是否传了回调函数
    /* if(callback) { 
        callback();
    } */
    // 可以简写为下边这种。 &&是短路运算符，存在callback（即第一个式子为true）时才会继续执行callback()
    callback && callback();
}

Weitere coole Javascript-Spezialeffektcodes finden Sie unter:

js-Spezialeffektsammlung

Das obige ist der detaillierte Inhalt vonJavaScript imitiert den Taobao-Return-to-top-Effekt (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!