Javascript: check that the page is at the top

Is there any way to check with javascript if the page is in scroll(0,0) ?

The reason is that I have a full page slider, which I need to pause, the second page is not at the beginning.

And this may not be necessary because the page scrolls live, since I have HTML # internal links that will load the page directly into the scroll without actually scrolling.

Thus, the check should be that the page is not at the top, and the page is not scrolling.

+15
source share
4 answers

Try the following:

 document.body.scrollTop === 0 
+33
source

You can check if window.scrollY (the number of pixels the window scrolled vertically) is equal to 0 . If you want to check if the window was scrolled to the last, you can check if window.scrollX (the number of pixels that the window scrolled horizontally) is equal to 0 . If you combine them, the window will be at (0,0).

 if(window.scrollY==0){ //user scrolled to the top of the page } if(window.scrollX==0){ //user scrolled to the leftmost part of the page } if(window.scrollY==0&&window.scrollX==0){ //user scrolled to the leftmost part of the top of the page—ie, they are at position (0, 0) } 

Demo:

 html, body{ height: 3000px; position: relative; margin: 0; } 
 <div style="position: absolute; width: 100%; top: 0; left: 0; right: 0px; background-color: dodgerblue; text-align: center;"> Header </div> <button style="position: fixed; right: 0; bottom: 0; display: none;" onClick="window.scroll({top: 0, left: 0, behavior: 'smooth'})"> Back To Top </button> <div style="position: absolute; width: 100%; bottom: 0; left: 0; right: 0px; background-color: dodgerblue; text-align: center;"> Footer </div> <script> var goToTop = document.querySelector('button'); window.addEventListener("scroll", function(){ if(window.scrollY==0){ //user is at the top of the page; no need to show the back to top button goToTop.style.display = "none"; } else { goToTop.style.display = "block"; } }); </script> 

For better browser compatibility, use window.pageYOffset instead of window.scrollY and window.pageXOffset instead of window.scrollX .

The following code can be used when full browser compatibility is required (e.g. IE & lt; 9):

 var x = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft; //number of pixels scrolled horizontally (work with this value instead of window.scrollX or window.pageXOffset) var y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; //number of pixels scrolled vertically (work with this value instead of window.scrollY or window.pageYOffset) 
+5
source

I think you can get the position using jQuery $ (window) .scrollTop ();

+3
source

Updated answer for 2019

document.body.scrollTop is deprecated and no longer works in Chrome. The best way to solve this problem is to simply consider all three possibilities of a cross-browser solution.

 !window.pageYOffset 

One of these three should work on all types of browsers. If the value is 0, you are at the top of the viewport.

+2
source

All Articles