Animer le défilement dans jQuery
-
Utilisez la méthode
animate()pour faire défiler dans jQuery -
Utilisez la méthode
animate()avec une limite de temps pour faire défiler la page dans jQuery
jQuery est largement promu pour sa syntaxe facile à réaliser des idées complexes, tandis que JavaScript ES6 est un concurrent difficile de nos jours.
Lorsque nous nous concentrons sur le défilement d’un div ou d’une page Web à une certaine hauteur, nous remarquons plusieurs solutions. Cependant, la méthode jQuery animate() accepte explicitement l’instance de body et html et défile comme préférence.
Nous allons effectuer un scroll vertical basique dans nos jeux d’exemples via la méthode jQuery animate(). Dans ce dernier exemple, nous examinerons une instance avec un laps de temps limité.
Utilisez la méthode animate() pour faire défiler dans jQuery
A cet égard, nous accepterons l’instance des éléments body et html. La convention est donc telle que plusieurs navigateurs peuvent exécuter la fonction quelles que soient leurs contraintes.
Ensuite, nous allons lancer la méthode animate() avec l’instance et définir la spécification scrollTop: "0". Nous pouvons également définir le scrollTop sur n’importe quelle valeur de préférence.
Dans ce cas, la page ne sera pas acheminée vers le haut ; il grimpera plutôt à la distance entre toute la hauteur de la page et la valeur scrollTop.
Extrait de code:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<h4>TOP</h4>
<h4>TOP-20</h4>
<div id="pos" style="height: 600px;background:pink"></div><br>
<button onclick="press()">Go to Top</button>
<script>
function press(){
$("html, body").animate({scrollTop: "20"});
}
</script>
Production:
Utilisez la méthode animate() avec une limite de temps pour faire défiler la page dans jQuery
Cet exemple inclut une fonction similaire au précédent. Mais l’ajout ici est que nous pouvons définir la synchronisation du défilement sans définir la fonction setInterval.
Tout ce que nous ferons, c’est ajouter le timing préférable avec la propriété scrollTop. Cela facilitera ou assurera la valeur de la vitesse de défilement de la page.
Extrait de code:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<h4>TOP</h4>
<div id="pos" style="height: 600px;background:powderblue"></div><br>
<button onclick="press()">Go to Top</button>
<script>
function press(){
$("html, body").animate({scrollTop: "0"}, 3000);
}
</script>
Production:
