Explication détaillée de trois façons d'obtenir la fonction de défilement fluide de la page vers le haut

Depuis peu, le compte public H5 de la société de développement dispose d'une fonction permettant de faire défiler vers le haut en cliquant sur l'icône. La fonction est relativement simple à implémenter. Appelez simplement window.scrollTo(0, 0) directement et complétez-la en une seule ligne de code. Mais en tant que lion de siège, comment pourrais-je avoir des exigences aussi faibles pour moi-même, alors j'ai ajouté une exigence pour moi-même pour réaliser la fonction de défilement fluide de la page vers le haut. Après recherche et examen des documents, nous avons les trois options suivantes.

Le plus haut niveau de fonctionnalité peut être atteint en utilisant uniquement CSS. Le code est le suivant :

 html { comportement de défilement : lisse ;}

La fonction de ce style est de spécifier un comportement de défilement pour les éléments avec des barres de défilement, mais il ne prend effet que lorsque l'utilisateur navigue manuellement ou que l'API de défilement CSSOM déclenche le défilement, et n'affecte pas le défilement provoqué par le comportement de l'utilisateur. Juste au moment de faire la fête, j'ai ouvert Puis-je utiliser et vérifié la compatibilité :

Bon sang, implémentons-le simplement avec JS.

Nous savons tous que window.scrollTo(x, y) réalise la fonction de défilement jusqu'à une certaine position sur la page en transmettant les coordonnées des axes x et y dans le document. En fait, cette API peut aussi passer une option, qui est un objet. La valeur de gauche correspond au x dans les coordonnées, le haut correspond au y dans les coordonnées, et il y a aussi une valeur de comportement, ce qui vous permet. pour personnaliser le comportement de défilement. Ensuite, nous implémentons le défilement comme ceci.

 window.scrollTo({ gauche : 0, haut : 0, comportement : 'smooth'})

Ça sent si bon, c'est fait. Quelques jours plus tard, le chef de produit est venu me voir avec une épée de 5 mètres et m'a dit que l'effet de défilement sur Safari était étrange et que l'examen physique était extrêmement médiocre. J'ai donc ouvert silencieusement le document MDN et fait défiler vers le bas :

En voyant cette image, bien que le navigateur API soit presque pris en charge, l'option option se bloque directement sur Safari, j'ai donc rouvert stackoverflow et résumé la solution ultime.

Je vois souvent le fameux requestAnimationFrame, mais je n'ai jamais l'occasion de l'utiliser. Cette fois je peux l'essayer. Nous savons que la fonction de requestAnimationFrame est de dire au navigateur d'exécuter la fonction de rappel entrant avant le prochain redessin. Ce comportement est automatiquement effectué par le navigateur pour vous. Nous avons donc le code suivant :

 const scrollToTop = () => { let scrollTop = document.documentElement.scrollTo || document.body.scrollTop if (scrollTop > 0) { window.requestAnimationFrame(scrollTop) window.scrollTop(0, scrollTop - scrollTo / 8) }}

Fait! ! ! Parfait! ! ! Bien qu'excité, j'ai activé puis-je utiliser pour vérifier la compatibilité de requestAnimationFrame :

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.