{"id":6879,"date":"2019-09-08T12:00:58","date_gmt":"2019-09-08T10:00:58","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6879"},"modified":"2019-09-08T14:51:46","modified_gmt":"2019-09-08T12:51:46","slug":"saviez-vous-scrollintoview-js-pour-defiler-vers-element","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/saviez-vous-scrollintoview-js-pour-defiler-vers-element","title":{"rendered":"Le saviez-vous \u2013 scrollIntoView() en JS pour d\u00e9filer vers un \u00e9l\u00e9ment."},"content":{"rendered":"

Il n’y a pas si longtemps j’ai vu un des d\u00e9veloppeurs avec lesquels je travaille \u00e9crire une fonction tr\u00e8s complexe pour permettre un d\u00e9filement fluide vers un \u00e9l\u00e9ment plus bas dans la page. J’ai \u00e9t\u00e9 assez surpris qu’il n’utilise pas scrollIntoView()<\/code> et son param\u00e8tre behavior<\/code> de valeur smooth<\/code>. \u00c7a vous parle ?<\/p>\n

<\/p>\n

Quand on a l’habitude de faire d’une certaine mani\u00e8re, difficile de se remettre en question notamment lorsque les projets sont un peu tendus en terme de timing. Souvent, m\u00eame, en tant que d\u00e9veloppeurs, vous avez tendance \u00e0 vous cr\u00e9er un petit fichier d’utilities<\/em><\/span> ou de helpers<\/em><\/span> pour \u00e9viter d’avoir \u00e0 r\u00e9\u00e9crire les petites fonctions utiles que vous avez l’habitude de r\u00e9utiliser.<\/p>\n

J’avais moi-m\u00eame \u00e9crit une petit fonction il y a un moment en utilisant jQuery (eh oui \u00e7a date :p).
\nSmoothscroll en jQuery<\/a>.<\/p>\n

Smooth-scroll au clic avec scrollIntoView()<\/code><\/h2>\n

Imaginez une ancre interne dans une page, lorsque l’utilisateur clic sur le lien vous souhaitez proposer un d\u00e9filement fluide jusqu’au d\u00e9but de cet \u00e9l\u00e9ment (ici la cible est #part-3<\/code>). C’est possible rapidement avec ce petit bout de code JavaScript.<\/p>\n

const target = document.getElementById('part-3'),      button = document.getElementById('goto');button.addEventListener('click', function(){\t\ttarget.scrollIntoView({\t\tblock: 'start',\t\tbehavior: 'smooth',\t\tinline: 'nearest'\t});\t});<\/code><\/pre> 
 <\/div> <\/div>\n
Comme vous pouvez le voir, rien de bien sorcier. Les param\u00e8tres sont les suivants, ils sont tous optionnels :<\/p>\n