Javascript：检查页面是否在顶部

Javascript: check IF page is at top

提问by Seamus O'Hara

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

有没有办法用javascript检查页面是否在scroll(0,0)？

Reason being I've got a full page slider that I need to pause the second the page is not at origin.

原因是我有一个完整的页面滑块，我需要在页面不在原点时暂停。

And it might not necessarily be because the page is being scrolled live as I've got internal HTML # links that would load the page right to a scrolled point without actually scrolling.

这可能不一定是因为页面正在滚动，因为我有内部 HTML # 链接，可以将页面正确加载到滚动点，而无需实际滚动。

So the check needs to be is the page not at the top, as opposed to, has the page been scrolled.

因此，需要检查的是页面不在顶部，而不是页面是否已滚动。

回答by Esailija

Try this:

尝试这个：

document.body.scrollTop === 0

回答by hev1

You can check if window.scrollY(the number of pixels the window has scrolled vertically) is equal to 0. If you want to check if the window has been scrolled to its leftermost, you can check if window.scrollX(the number of pixels the window has scrolled horizontally) is equal to 0. If you combine the two, it will ensure the the window is at (0,0) position.

您可以检查window.scrollY（窗口垂直滚动的像素数）是否等于0。如果要检查窗口是否已滚动到最左侧，可以检查window.scrollX（窗口水平滚动的像素数）是否等于0。如果将两者结合起来，它将确保窗口位于 (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—i.e., 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.pageYOffsetinstead of window.scrollYand window.pageXOffsetinstead of window.scrollX.

为了更好的浏览器兼容性，请使用window.pageYOffset代替window.scrollY和window.pageXOffset代替window.scrollX。

The following code can be used in cases when full browser compatability is necessary (i.e., IE < 9):

在需要完全兼容浏览器的情况下（即 IE < 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)

回答by Chris Hawkes

Updated Answer for 2019

更新了 2019 年的答案

document.body.scrollTop is deprecated and doesn't work at all in Chrome anymore. The best way to solve this is simply looking at all three possibilities to have a cross browser solution.

document.body.scrollTop 已弃用，并且在 Chrome 中根本无法使用。解决此问题的最佳方法是简单地查看所有三种可能性，以获得跨浏览器解决方案。

!window.pageYOffset 

One of these three should work on all browser types. If the value equals 0, your at the top of the viewport.

这三个中的一个应该适用于所有浏览器类型。如果该值等于 0，则您位于视口的顶部。

回答by zaoudis

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

我认为您可以使用 jQuery $(window).scrollTop(); 获得位置；