Javascript: проверьте, что страница находится наверху

Есть ли способ проверить с помощью javascript, если страница находится в scroll(0,0)?

Причина в том, что у меня есть полный слайдер страницы, который мне нужно сделать паузой, вторая страница не в начале.

И это может быть необязательно, потому что страница прокручивается вживую, так как у меня есть внутренние ссылки HTML #, которые будут загружать страницу прямо в прокрутку без фактической прокрутки.

Таким образом, проверка должна состоять в том, что страница не наверху, а не прокручивается страница.

Ответы

Ответ 1

Попробуйте следующее:

document.body.scrollTop === 0

Ответ 2

Вы можете проверить, равно ли 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>

Ответ 3

Я думаю, вы можете получить позицию, используя jQuery $(window).scrollTop();

Ответ 4

Обновленный ответ на 2019 год

document.body.scrollTop устарела и больше не работает в Chrome. Лучший способ решить эту проблему - просто рассмотреть все три возможности кросс-браузерного решения.

!window.pageYOffset

Один из этих трех должен работать на всех типах браузеров. Если значение равно 0, вы находитесь в верхней части области просмотра.