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 vertical scroll bar allows us to scroll the content vertically i.e., up or down.
Now to question is how to enable vertical 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:
- How to scroll a page to the topmost position using JavaScript?
- How to scroll a page to the topmost position using jQuery?
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:
1 | window.scrollTo(x-coordinate, y-coordinate); |
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?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <html> <body> <style> p { background-color: antiquewhite; } </style> <h1 style="background-color: black; color: white; text-align: center;"> Welcome to linuxhint </h1> <h3 style="background-color: coral; color: white; text-align: center;"> Anees Asghar </h3> <p> How to scroll to the top of the page using JavaScript/jQuery </p> <p style="height: 500px;"> Click on the "Click here!" button to scroll back on the top of the page using JavaScript </p> <button onclick="topFun()"> Scrollback to the top! </button> <script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script> <script> function topFun() { window.scrollTo(0, 0); } </script> </body> </html> |
The above program performed the below-given tasks:
- Created <h1> and <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 vertical 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 vertical scrollbar position:
1 | $(selector).scrollTop(); |
Follow the below-given syntax to set the vertical scrollbar position:
1 | $(selector).scrollTop(position); |
Example: how to use scrollTop() method?
Let’s consider the following code block to understand the working of the scrollTop() method:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <html> <body> <style> p { background-color: antiquewhite; } </style> <h1 style="background-color: black; color: white; text-align: center;"> Welcome to linuxhint </h1> <h3 style="background-color: coral; color: white; text-align: center;"> Anees Asghar </h3> </h3> <p> How to scroll to the top of the page using JavaScript/jQuery </p> <p style="height: 500px;"> Click on the "Click here!" button to scroll back on the top of the page using jQuery </p> <button onclick="topFun()"> Click Here! </button> <script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script> <script> function topFun() { $(window).scrollTop(0); } </script> </body> </html> |
The above code block performed the following functionalities:
- Created <h1> and <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.
