scrollIntoView is a JavaScript method that scrolls an element into view, making it visible to the user. It's a convenient way to ensure that a specific element is visible on the page, especially after some dynamic changes or user interactions.
Here's the basic syntax:
1
element.scrollIntoView();


We can also pass options to control the behavior:
1
element.scrollIntoView(options);


The options object can have the following properties:
  • behavior: Specifies the transition animation. Can be "auto" or "smooth". 
  • block: Specifies where to align the element. Can be "start", "center", "end", or "nearest". 
  • inline: Specifies where to align the element horizontally. Can be "start", "center", "end", or "nearest".
1
2
3
4
5
function smoothScroll(){
    document.querySelector('.your_class or #id here').scrollIntoView({
        behavior: 'smooth'
    });
}

Note : scrollIntoView only works on elements that are visible and not hidden or collapsed. Also, it doesn't work on elements that are fixed or absolutely positioned.