Определите, была ли страница загружена вверху или где-то внизу страницы, с помощью Javascript

Question

Большинство веб-страниц загружаются так, что по умолчанию вы находитесь наверху страницы. Если вы находитесь на полпути вниз по странице и нажимаете «Обновить / Перезагрузить», большинство браузеров перезагрузят страницу, но вы все равно будете там, где были на этой странице.

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

Я попытался получить значение, используя что-то подобное в jQuery:

var h_offset = $('.h').position();
alert(h_offset.top);

Однако это сообщит 0, так как мой .h div расположен абсолютно в верхней части браузера, даже если я прокручиваюсь на полпути вниз по странице.

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

Answer 1

Вы можете использовать document.documentElement.scrollTop, чтобы проверить положение оси прокрутки Y страницы после загрузки страницы.

Вы можете использовать jQuery .offset(), чтобы получить смещение сверху и слева от элемента с абсолютным позиционированием после загрузки страницы.

$(window).on('load', function() {
  let scrollTop = document.documentElement.scrollTop;

  console.log('scrollTop', scrollTop);

  // Get the offset (left, top) of #abs element after page load
  let { left, top } = $('#abs').offset();

  console.log('#abs top', top);

  if (scrollTop === 0) {
    // We are at the top
  } else {
    // The page is scrolled down by scrollTop pixels

    // Use scrollTop and left to calc new scroll value or set it to 0
    // You can use this to scroll the page at the top after each load
    setTimeout(() => {
      window.scrollTo(0, 0); 
    }, 50);
  }
});

$(window).on('load', function() {
  let scrollTop = document.documentElement.scrollTop;

  console.log('scrollTop', scrollTop);
  
  let { left, top } = $('#abs').offset();
  
  console.log('#abs top', top);

  if (scrollTop === 0) {
    // We are at the top
  } else {
    // The page is scrolled down by scrollTop pixels

    // You can use this to scroll the page at the top after each load
    setTimeout(() => {
      window.scrollTo(0, 0); 
    }, 50);
  }
});

#abs {
  position: absolute;
  left: 100px;
  top: 2000px;
  width: 20px;
  height: 20px;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Top of the page</h1>
<div style="margin-bottom: 2000px"></div>
<h1>Bottom of the page</h1>

<div id="abs"></div>