The scroll bar or scrolling feature determines the position in which the scrolling takes place. A scroll bar can move horizontally as well as vertically. The horizontal scroll bar allows us to scroll the content horizontally i.e., left or right. While the tieso scroll bar allows us to scroll the content vertically i.e., up or down.

Now to question is how to enable tieso scrolling in JavaScript or jQuery so that whenever a user clicks on a button, the page scrolls to the topmost position? Well! We have a couple of approaches that can be used to accomplish this task.

This post will explain the working of the below-listed approaches to scroll the page to the topmost position:

So, let’s get started!

How to scroll a page to the topmost position using JavaScript?

In JavaScript, the window interface provides a built-in method named scrollTo() that can be used to scroll to some particular position on the page.

Syntax

You to follow the below syntax in order to work with the scrollTo() method:

The above snippet shows that the window.scrollTo() method accepts x-coordinate and y-coordinate as parameters. If we specify both coordinates as “0” then the scrollTo() method will move/scroll the page to the topmost point.

Example: how to use window.scrollTo() method?

The above program performed the below-given tasks:

• Created <h1> e <h3> tags to add headings and applied inline CSS to style them.
• Created a couple of paragraphs using <p> element.
• Created a button named “Scrollback to the top!”.
• Clicking on the “Scrollback to the top!” button will invoke the “topFun()” method.
• Within topFun() method, we utilized the window.scrollTo() method.
• We set both coordinates as 0, consequently, clicking on the “Scrollback to the top!” button will scroll the page to the topmost position.

The output verified that clicking the button scrolled the page to the topmost position.

How to scroll a page to the topmost position using jQuery?

Jquery provides a method named “scrollTop()” that is used to return/set the tieso scrollbar position for the targeted element. Position 0 represents that the scrollbar is on the top. So, we have to pass “0” as an argument to the “scrollTop()” method in order to scroll back to the top of the page.

Syntax

Follow the below-given syntax to get the tieso scrollbar position:

Follow the below-given syntax to set the tieso scrollbar position:

Example: how to use scrollTop() method?

Let’s consider the following code block to understand the working of the scrollTop() method:

The above code block performed the following functionalities:

• Created <h1> e <h3> tags to add headings and applied inline CSS to style them.
• Created a couple of paragraphs using <p> element.
• Created a button named “Click Here!”.
• Clicking on the “Click Here!” button will invoke the “topFun()” method.
• Within topFun() method, we utilized the scrollTop() method.
• We passed “0” as a position to the scrollTop() method. Consequently, clicking on the “Click Here!” button will scroll the page to the topmost position.

This is how the scrollTop() method works in jQuery

Conclusion

In JavaScript, passing “0, 0” as parameter to the window.scrollTo() method will scroll the page to the topmost position. In jQuery passing “0” as an argument to the “scrollTop()” method will scroll the page to the topmost position. This post considered a couple of examples to provide a detailed knowledge about the window.scrollTo() and scrollTop() methods.