JavaScript imite l'effet de retour en haut de Taobao (exemple de code)

Ce que cet article vous apporte, c'est l'effet de retour en haut de l'imitation JavaScript Taobao (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Exigence : lorsque la barre de défilement atteint une certaine position, la barre latérale est fixée à une certaine position, et lorsqu'elle glisse vers une certaine position, le dos Le bouton vers le haut s'affiche. Après avoir cliqué sur le bouton, la page glissera dynamiquement vers le haut, glissant vers le haut de rapide à lent.

Idées :

1. Le code js ne peut pas être exécuté tant que la page n'est pas chargée

Vous pouvez ajouter js Le code est écrit en bas (c'est la façon de revenir en haut exemple)

Si vous souhaitez l'écrire en haut, vous pouvez utiliser les deux types suivants :

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

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

2. Obtenez les éléments dont vous avez besoin

3. Liez le parchemin d'événement de défilement

Lorsque l'utilisateur fait défiler jusqu'au module bannière Rendre la barre latérale corrigée

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';
}

Afficher le bouton de retour en haut lorsque l'utilisateur fait défiler vers le module principal

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

4. Liaison, clic, événement, clic

Après avoir cliqué sur le bouton de retour en haut, la page glissera dynamiquement vers le haut, glissant vers le haut de rapide à slow

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

5. À propos de la fonction d'animation animate(obj, target, callback)

Ici, l'objet obj est window ; target la position cible est 0 ; le rappel est une fonction de rappel, vous pouvez l'ignorer si aucun paramètre n'est transmis

Définir un timer setInterval();

Déclarez un pas comme valeur de pas, la valeur est entre la position supérieure et la position actuelle de la barre de défilement Divisez la différence par 10 (le pas deviendra de plus en plus petit et la vitesse de défilement deviendra de plus en plus lente, réalisant le défilement barre glissant de rapide à lent)

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

Cependant, step Ce n'est pas toujours un entier Lorsque step n'est pas un entier, vous pouvez faire avancer un peu la barre de défilement. La barre de défilement peut glisser de haut en bas, le pas peut donc être supérieur à zéro ou inférieur à zéro. Si supérieur à zéro, arrondissez vers le haut, si inférieur à zéro, arrondissez vers le bas

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

window.scroll(x, y) Faites défiler jusqu'à une position spécifique dans le document Le timer est appelé à chaque fois La fonction glissera un peu vers le haut

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

pour déterminer si l'animation est terminée, et si elle est terminée, fermez le timer clearInterval();

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

Détails Le code est le suivant :

    
    
    
    
    


    

        返回顶部
    
    
头部区域
    
banner区域
    
主体部分

    <script>
        // querySelector() 方法返回匹配指定选择器（）的第一个元素，传的必须是字符串
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        var bannerTop = banner.offsetTop; // banner模块距离顶部的长度
        var sliderbarTop = sliderbar.offsetTop - bannerTop; // 侧边栏固定后距离顶部的长度

        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;  // main模块距离顶部的长度
        
        // scroll 屏幕发生滚动事件时执行
        document.addEventListener('scroll', function() {
            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';
            }
            
            if(window.pageYOffset >= mainTop) {    // 当用户滚到main模块时显示返回顶部按钮
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }
            
        });
        sliderbar.addEventListener('click', function() {
            animate(window, 0);
        })

        /* 动画函数：
         *  obj 做动画的对象（这里就是指window）
         *  target 目标位置（顶部）
         *  callback 回调函数（没有传参的话就不执行）
         */
        function animate(obj, target, callback) {
            clearInterval(obj.timer);  // 先清除定时器，保证只有一个定时器在执行，以免出现bug
            obj.timer = setInterval(function() {
                // window.pageYOffset距离顶部的距离（是负的）
                var step = (target - window.pageYOffset) / 10;  // step步长（让页面速度逐渐变慢的滑动上去）
                step = step &gt; 0 ? Math.ceil(step) : Math.floor(step); // step并不总是整数。大于零向上取整,小于零向下取整
                if(window.pageYOffset == target) {  // 当页面回到顶部后(即动画执行完) 清除定时器
                    clearInterval(obj.timer);
                    //  判断是否传了回调函数
                    /* if(callback) { 
                        callback();
                    } */
                    // 可以简写为下边这种。 &&是短路运算符，存在callback（即第一个式子为true）时才会继续执行callback()
                    callback && callback();
                }
                // window.scroll(x, y) 滚动到文档特定位置
                window.scroll(0, window.pageYOffset + step);
            }, 15);
        }
    </script>

D'autres codes d'effets spéciaux javascript sympas sont disponibles sur :

collection d'effets spéciaux js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!