Scroll to the top of the page using JavaScript/jQuery - GeeksforGeeks

03 Aug, 2021
A scrollable page can be scrolled to the top using 2 approaches:
Method 1: Using window.scrollTo()The scrollTo() method of the window Interface can be used to scroll to a specified location on the page. It accepts 2 parameters the x and y coordinate of the page to scroll to. Passing both the parameters as 0 will scroll the page to the topmost and leftmost point.
Syntax:
window.scrollTo(x-coordinate, y-coordinate)
Example:
<!DOCTYPE html><html>  <head>    <title>      Scroll to the top of the      page using JavaScript/jQuery?  </title>    <style>        .scroll {            height: 1000px;            background-color: lightgreen;        }    </style></head>  <body>    <h1 style="color: green">      GeeksforGeeks  </h1>    <b>Scroll to the top of the page       using JavaScript/jQuery?</b>        <p>Click on the button below to       scroll to the top of the page.</p>        <p class="scroll">GeeksforGeeks is a      computer science portal. This is a       large scrollable area.</p>        <button onclick="scrollToTop()">      Click to scroll to top  </button>    <script>        function scrollToTop() {            window.scrollTo(0, 0);        }    </script></body>  </html>
Output:
Before clicking the button:
After clicking the button:
Method 2: Using scrollTo() in jQuery
In jQuery, the scrollTo() method is used to set or return the vertical scrollbar position for a selected element. This behavior can be used to scroll to the top of the page by applying this method on the window property. Setting the position parameter to 0 scrolls the page to the top.
Syntax:
$(window).scrollTop(position);
Example:
<!DOCTYPE html><html>  <head>    <title>      Scroll to the top of the      page using JavaScript/jQuery?  </title>    <style>        .scroll {            height: 1000px;            background-color: lightgreen;        }    </style>  </head>  <body>    <h1 style="color: green">      GeeksforGeeks  </h1>    <b>      Scroll to the top of the page      using JavaScript/jQuery?  </b>    <p>      Click on the button below to       scroll to the top of the page.  </p>    <p class="scroll">      GeeksforGeeks is a computer      science portal.       This is a large scrollable area.  </p>    <button onclick="scrollToTop()">      Click to scroll to top  </button>    <script src="https://code.jquery.com/jquery-3.3.1.min.js">  </script>    <script>        function scrollToTop() {            $(window).scrollTop(0);        }    </script></body>  </html>
Output:
Before clicking the button:
After clicking the button:
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
jQuery-Misc
Picked
JavaScript
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?