Javascript:检查页面是否在顶部
Javascript:检查页面是否在顶部
提问于 2011-11-22 04:32:29
如果页面在scroll(0,0)**?** scroll(0,0)**？**上，有没有办法用JavaScript检查页面
原因是我有一个完整的页面滑块，我需要暂停的第二个页面不在原点。
这可能不一定是因为页面是实时滚动的，因为我有内部HTML #链接，这些链接会将页面加载到滚动点，而不是实际滚动。
因此，需要检查的是页面不在顶部，而不是页面是否滚动过。
回答 4
Stack Overflow用户
发布于 2011-11-22 04:35:16
试试这个：
document.body.scrollTop === 0Stack Overflow用户
发布于 2018-08-06 07:27:20
您可以检查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)Stack Overflow用户
发布于 2019-06-10 22:19:32
2019年的更新答案
document.body.scrollTop已被弃用，在Chrome中完全不起作用。解决这个问题的最好方法是简单地查看所有三种可能性，以获得一个跨浏览器的解决方案。
!window.pageYOffset 这三种方法中的一种应该适用于所有类型的浏览器。如果该值等于0，则表示位于视口顶部。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8218159
复制相关文章
相似问题