Scroll to a specific element in an LWC form

We may want to let the user navigate to different sections of a page in LWC when s/he clicks a particular button.

Such an example can be a form where index is maintained and when a user clicks on a particular section, navigates him/her to the associated content.

This works both in Desktop as well as Mobile devices.

To achieve this, the user can add different components inside div elements as below:

<div class="scrollCls">

    <c-hello-world >

</c-hello-world >

</div>

When a button is clicked, it fires the below event to scroll down to a particular element on the form:

handleScroll(){

    this.template.querySelector('.scrollCls').scrollIntoView();

}