{"id":6889,"date":"2019-09-08T12:25:03","date_gmt":"2019-09-08T10:25:03","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6889"},"modified":"2019-09-08T14:49:14","modified_gmt":"2019-09-08T12:49:14","slug":"did-you-know-scrollintoview-js-scroll-element","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/en\/tutorials\/did-you-know-scrollintoview-js-scroll-element","title":{"rendered":"Did you know \u2013 scrollIntoView() in JS in order to scroll to an element"},"content":{"rendered":"

Not so long ago I saw one of the developers I work with writing a very complex function to allow a smooth scrolling to a lower element on the page. I was quite surprised that he doesn’t use scrollIntoView()<\/code> and his behavior<\/code> parameter and its smooth<\/code> value. Did you heard of it?<\/p>\n

<\/p>\n

When you are used to doing things in a certain way, it is difficult to question yourself, especially when projects are a little tense in terms of timing. Often, even as developers, you tend to create a small file of utilities or helpers to avoid having to rewrite the small useful functions that you are used to reusing.<\/p>\n

I wrote a little function myself a while ago using jQuery (yes, it’s way outdated: p), but it’s in french ^^”
\nSmoothscroll in jQuery<\/a>.<\/p>\n

Smooth-scroll on click with scrollIntoView()<\/code><\/h2>\n

Imagine an internal anchor in a page, when the user clicks on the link you want to propose a smooth scrolling to the beginning of this element (here the target is #part-3<\/code>). This is possible with this little piece of 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
As you can see, there’s nothing very complicated about it. The parameters are as follows, they are all optional:<\/p>\n