JavaScript：检查页面是否在顶部

Question

JavaScript：检查页面是否在顶部

javascriptscroll

37

有没有办法使用JavaScript检查页面是否在scroll(0,0)位置？

原因是我有一个全屏幕滑动效果，需要在页面不处于初始化位置时立即暂停。

这可能并非由于页面正在实时滚动，而是因为我有内部HTML #链接，可以直接将页面加载到滚动的位置，而不需要实际滚动。

因此，需要检查页面是否不在顶部，而不是已经被滚动了多少。

- Seamus O'Hara

4个回答

36

试试这个：

document.body.scrollTop === 0

- Esailija

2

这根本不起作用。 - Greg Tomasik

3

@GregTomasik 使用 window.scrollY - PP Laru

10

2019年更新答案

document.body.scrollTop已经被废弃，在Chrome浏览器中已经不再起作用。最好的解决方法是同时考虑三种可能性，以实现跨浏览器的解决方案。

!window.pageYOffset

以下三种方法适用于所有浏览器类型。如果值等于0，则表示您在视口顶部。

- Chris Hawkes

"document.body.scrollTop === 0" 总是返回 true。 - MennyMez

在Chrome中我相信可以？其他浏览器我不确定。 - Chris Hawkes

5

我认为您可以使用jQuery的$(window).scrollTop()来获取位置。

- zaoudis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Unmitigated · Accepted Answer

您可以检查 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)
}

演示：

var goToTop = document.querySelector('#backToTop');
goToTop.addEventListener("click", function(e){
  window.scroll({top: 0, left: 0, behavior: 'smooth'});
  //scroll smoothly back to the top of the page
});
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 = "";
  } else {
    goToTop.style.display = "block";
  }
});

body,html{height:3000px;position:relative;margin:0}#footer{position:absolute;width:100%;bottom:0;left:0;right:0;background-color:#1e90ff;text-align:center}#backToTop{position:fixed;right:0;bottom:0;display:none;z-index:1}#header{position:absolute;width:100%;top:0;left:0;right:0;background-color:#1e90ff;text-align:center}

<div id="header">Header</div>
<button id="backToTop">Back To Top</button>
<div id="footer">Footer</div>

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

以下代码可在必须实现完整浏览器兼容性时使用（例如：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)