Comment obtenir l'effet de retour au sommet en JS natif ? (explication détaillée)

Cet article vous présentera comment utiliser JS natif pour obtenir l'effet de retour au sommet. 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.

J'ai récemment regardé un tutoriel de cas en ligne - retour au premier effet (implémentation native de js). Comme cet effet est plus pratique et pas difficile, je l'ai implémenté une fois après l'avoir lu. L'effet n'était pas mauvais, j'ai donc pris des notes au cas où j'en aurais besoin !

b0d1b11d11e0ef043e44e19578ba6a595db79b134e9f6b82c0b36e0489ee08ed

Cette balise a est utilisée pour implémenter le lien vers le haut, où href="javascript:;" est utilisé pour empêcher le comportement par défaut de la balise a, car nous voulons déclencher un événement de clic pour faites en sorte que la barre de défilement revienne en haut au lieu de passer à la page. Bien sûr, si vous le définissez sur href="", il passera par défaut en haut de la page, mais l'expérience utilisateur est relativement médiocre. Nous souhaitons principalement obtenir un effet d'assouplissement. OK, définissons le style de la balise a :

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

Ici, la balise a est fixée dans le coin inférieur droit de la page via position:fixed. La position spécifique peut être transmise. Ajustez finement à droite et en bas. Définissez l'image d'arrière-plan pour la balise a, qui est l'image ci-dessus. La valeur par défaut est d'afficher la moitié supérieure de l'image, soit 40 X 40. En raison de la taille de l'image (40 X 80), la position de l'arrière-plan peut être directement réglé en haut à gauche.

Et la balise a est masquée en premier par défaut. Lorsque nous faisons défiler la page, si la hauteur de défilement est plus grande que la zone visible de​​notre ordinateur, la balise a sera principalement affichée. implémenté avec JS, qui sera discuté ci-dessous !

L'effet flottant de la balise a est en fait très simple. Changez simplement la position de l'image d'arrière-plan. Pour plus de détails, reportez-vous au code CSS ci-dessus !

Maintenant que le style du bouton de retour en haut est disponible, l'étape suivante consiste à utiliser JS pour obtenir l'effet de retour en haut lorsque vous cliquez sur le bouton. Le code est le suivant :

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

Nous y voilà. L'effet peut être obtenu en revenant en haut. Vous pouvez l'obtenir dans le navigateur pour le tester. En fait, il existe de nombreuses façons d’obtenir l’effet de retour au sommet. Voici juste un plan de mise en œuvre à titre de référence !

Pour plus de codes d'effets spéciaux de fonction de retour en haut, veuillez visiter :

Retour au code en haut Colonne

[Recommandations associées]

5 retour simple vers le haut des codes d'effets spéciaux (collection)

html5 partage de codes d'effets spéciaux sélectionnés (collection)

Recommandé 5 codes de service client QQ flottants en ligne utiles à télécharger gratuitement (haute qualité)

Recommandé 5 codes d'effets spéciaux de code QR flottant pratiques et magnifiques pour pages Web

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!