Native JS implémente un retour en douceur aux meilleures compétences de composant_javascript

Le composant Retour en haut est une fonction de page Web extrêmement courante avec une exigence simple : après que la page défile sur une certaine distance, un bouton Retour en haut s'affiche. En cliquant sur ce bouton, vous pouvez faire défiler la barre de défilement jusqu'au début de la page. page.

L'idée d'implémentation est également très simple, il suffit de changer la valeur de document.documentElement.scrollTop ou document.body.scrollTop.

Cet article abandonne tous les effets intéressants de l'accélération et de la décélération, revient à l'essence du logiciel et propose la mise en œuvre la plus simple. Il ne poursuit que l'aspect pratique et ne poursuit pas la soi-disant expérience utilisateur.

L'idée et le code étant très simples, je publierai directement les détails de mise en œuvre :

var BackTop = function (domE,distance) {
if (!domE) return;
var _onscroll = window.onscroll,
_onclick = domE.onclick;
window.onscroll = throttle(function(){
typeof _onscroll === 'function' && _onscroll.apply(this, arguments);
toggleDomE();
},100);
domE.onclick = function(){
typeof _onclick === 'function' && _onclick.apply(this, arguments);
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
};
function toggleDomE(){
domE.style.display = (document.documentElement.scrollTop || document.body.scrollTop) > (distance || 500) ? 'block' : 'none';
}
function throttle(func, wait) {
var timer = null;
return function () {
var self = this, args = arguments;
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
return typeof func === 'function' && func.apply(self, args);
}, wait);
}
}
}; 

Méthode d'appel :

<script>
new BackTop(document.getElementById('backTop'))
</script> 

La raison pour laquelle j'ai écrit ce blog et fait une chose si simple est pour deux raisons :

1) J'ai écrit à la main certains composants simples courants. C'est le plus simple des simples. Afin de rendre cette série de blogs plus complète, j'ai ajouté ce composant ;

2) Je souhaite exprimer un de mes points de vue sur le processus de travail : n'utilisez pas l'expérience utilisateur pour décorer vos logiciels ou vos produits. Pour parler franchement, l'expérience utilisateur peut être divisée en deux mots, l'un est bonne impression, et l'autre est une bonne impression. C'est juste amusant, mais ce n'est pas le but ultime du développement et du fonctionnement du produit. Peu importe la beauté de vos produits, si la valeur fondamentale et le service du produit ne suffisent pas, même si vous le faites. fonction de revenir au sommet dans une fusée super invincible, ce sera en vain. Lors du développement front-end, vous devez exercer un certain contrôle sur la mesure dans laquelle le chef de produit mentionne aveuglément les fonctions d'expérience utilisateur. Pour ce composant, je pense qu'il est redondant de faire des effets d'accélération ou de décélération. Cela augmente non seulement le temps de développement. mais retarde également le temps des utilisateurs et s'abandonne. L'entêtement à jouer avec la technologie peut rendre votre travail plus parfait.

Permettez-moi de partager avec vous quelques codes de retour de page Web courants aux meilleurs codes

1. Il est plus simple d'utiliser des balises d'ancrage HTML

Mais le seul inconvénient est que le style n'est pas très bon et cette balise d'ancrage sera affichée.

Copier le code Le code est le suivant :

248880eee67e49e055bb813031cf47af5db79b134e9f6b82c0b36e0489ee08ed

Vous pouvez le placer n'importe où après la balise 6c04bd5ca3fcae76e30b72ad730ca86d, à condition qu'il soit proche du haut.

Place en bas de page :

Copier le code Le code est le suivant :

3084c989cc3fc7888f5bec97780f1351Retour en haut5db79b134e9f6b82c0b36e0489ee08ed

2. Utilisez la fonction Javascript Scroll pour revenir en haut

La fonction de défilement permet de contrôler la position de la barre de défilement. Il existe deux méthodes de mise en œuvre très simples :

Méthode 1 (recommandée : simple et pratique) :

Copier le code Le code est le suivant :

6ef0781b13415735db0500a4e94ca4b1Retour en haut5db79b134e9f6b82c0b36e0489ee08ed

Le premier paramètre de scroll est la position horizontale, et le deuxième paramètre est la position verticale. Par exemple, si vous souhaitez le positionner à 50 pixels verticalement, changez-le simplement en scroll(0,50).

Méthode 2 (concentration sur l'effet : lentement vers le haut) :

Cette méthode est un retour progressif vers le haut, qui devrait être plus esthétique. Le code est le suivant :

functionpageScroll() {window.scrollBy(0,-10);scrolldelay=setTimeout('pageScroll()',100);}<ahref="pageScroll();">返回顶部</a>

Cela reviendra dynamiquement en haut, mais bien qu'il revienne en haut, le code est toujours en cours d'exécution et vous devez ajouter une phrase à la fonction pageScroll pour l'arrêter.

if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);

3. Utilisez la fonction de défilement Onload plus pour revenir dynamiquement en haut

Premier ajout :

avant la fin de la balise body de la page web

<divid="gotop">返回顶部</div>

2. Appelez ensuite la partie de script JS suivante :

BackTop=function(btnId){varbtn=document.getElementById(btnId);vard=document.documentElement;window.onscroll=set;btn.onclick=function(){btn.style.display="none";window.onscroll=null;this.timer=setInterval(function(){d.scrollTop-=Math.ceil(d.scrollTop*0.1);if(d.scrollTop==0)clearInterval(btn.timer,window.onscroll=set);},10);};functionset(){btn.style.display=d.scrollTop?'block':"none"}};BackTop('gotop');

Ceux-ci peuvent être placés dans une page Web, ou peuvent être enregistrés indépendamment sous forme de fichier js, tel que gotop.js, puis sous la forme suivante :

<scriptsrc="/js/gotop.js"type=text/javascript></script>

pour appeler. Bien sûr, il est préférable de le placer sous l'étiquette "Retour en haut". Cette méthode d'appel suppose que le chemin du fichier est JS. Veuillez le modifier en fonction de la situation réelle lorsque vous le placez à d'autres emplacements.