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 = </ script > < script > function scrollToTop() { $(window).scrollTop(0); } </ script > </ body > </ html > |
Output:
- Before clicking the button:
- After clicking the button: