Faites défiler jusqu'à un élément spécifique en JavaScript

1. Utilisez la fonction scroll() pour faire défiler jusqu’à un élément en JavaScript
2. Utilisez la propriété href pour faire défiler jusqu’à un élément en JavaScript
3. Utilisez la fonction scrollIntoView() pour faire défiler jusqu’à un élément en JavaScript

Nous verrons comment obtenir l’élément spécifié dans la zone visible de la fenêtre du navigateur dans différents navigateurs à l’aide de JavaScript.

Les méthodes pour accomplir cette tâche sont les suivantes.

Utilisez la fonction scroll() pour faire défiler jusqu’à un élément en JavaScript

La fonction scroll() de l’interface d’élément fait défiler jusqu’à un ensemble spécifique de coordonnées au sein d’un élément donné. Cela convient pour Chrome et Firefox et pas pour le reste.

window.scroll(0, findPos(document.getElementById('myDiv')));

Nous obtenons l’élément requis en utilisant la méthode getElementById(). Nous passons cela dans la fonction scroll() pour faire défiler jusqu’à cet élément requis.

Utilisez la propriété href pour faire défiler jusqu’à un élément en JavaScript

Ici, nous pouvons définir la valeur href pour pointer vers une ancre dans la page Web en JavaScript.

location.href = '#';
location.href = '#myDiv';

Ici, #myDiv est l’ID de la balise <div> requise.

Utilisez la fonction scrollIntoView() pour faire défiler jusqu’à un élément en JavaScript

La fonction scrollIntoView() déplace l’élément fourni dans la zone visible de la fenêtre du navigateur. Ceci est le plus approprié pour les utilisateurs d’IE, Safari et Edge.

Par exemple,

document.querySelector('#myDiv').scrollIntoView({behavior: 'smooth'});

La propriété behavior décrit à quoi doit ressembler le parchemin. Dans notre exemple, il est réglé sur smooth. Cette propriété peut également être utilisée dans la fonction scroll().