Как получить и установить текущую позицию прокрутки веб-страницы?

121

Как я могу получить и установить текущую позицию прокрутки веб-страницы?

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

Если бы я мог зафиксировать текущую позицию прокрутки (в скрытом вводе) перед перезагрузкой страницы, я мог бы вернуть ее после перезагрузки.

javascript html

— хуг
источник

Разве форма, управляемая AJAX, не лучший способ предотвратить эти эффекты (и, конечно, предоставить запасной вариант на случай, если XHR недоступен)? При перезагрузке страницы страница будет прыгать вверх и обратно, причуда, которая может раздражать.

— Марсель Корпель

118

Вы ищете document.documentElement.scrollTopнедвижимость.

— SLaks
источник

спасибо, я нашел это: article.sitepoint.com/article/javascript-from-scratch/6 и изменил, getScrollingPosition()чтобы хранить значения в скрытых переменных. Затем в html обновленной странице, которую я использую <body onLoad="window.scrollTo(x,y), где x и y - это значения из скрытых значений!

— xyz

46

Я нахожу, по крайней мере, в Chrome на Ubuntu, который document.documentElement.scrollTopвсегда возвращает 0. document.body.scrollTopОднако, похоже, работает. С другой стороны, у одного Firefox на Ubuntu все наоборот - вы получаете 0 с bodyи правильное количество с documentElement. Есть идеи, что это дает?

— tobek 04

12

Этот ответ не точен, поскольку scrollTopсвойство работает не во всех браузерах. Проверьте window.pageXOffsetи window.pageYOffsetдля лучших результатов.

— gyo

135

В настоящее время принятый ответ неверен - document.documentElement.scrollTopвсегда возвращает 0 в Chrome. Это связано с тем, что WebKit использует bodyдля отслеживания прокрутки, тогда как Firefox и IE используют html.

Чтобы получить текущую позицию, вам нужно:

document.documentElement.scrollTop || document.body.scrollTop

Вы можете установить текущую позицию на 1000 пикселей вниз по странице следующим образом:

document.documentElement.scrollTop = document.body.scrollTop = 1000;

Или, используя jQuery (оживите его, пока вы в нем!):

$("html, body").animate({ scrollTop: "1000px" });

— tobek
источник

5

gyo, предлагая window.pageYOffsetболее чище, если вы используете методы window.scrollBy()или window.scrollTo().

— igorsantos07

32

Существуют некоторые несоответствия в том, как браузеры предоставляют текущие координаты прокрутки окна. Google Chrome на Mac и iOS, кажется, всегда возвращается 0при использовании document.documentElement.scrollTopили jQuery $(window).scrollTop().

Однако он работает стабильно с:

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset

— Гё
источник

Я тоже это заметил, это ошибка на Mac и iOS?

— Александр Ким

@AlexanderKim Я думаю, это может быть связано с тем, как интерпретируются определенные правила CSS (например, переполнение), и сообщалось, что он работает, если проверять scrollTop как для тела, так и для элементов html. Однако, чтобы избежать тестирования и отладки, я всегда полагаюсь на безопасные и согласованные pageXOffset / pageYOffset.

— Гё

1

большое спасибо за правильный ответ

— Майкл Паччоне

5

Я выбрал решение для локального хранилища HTML5 ... Все мои ссылки вызывают функцию, которая устанавливает это перед изменением window.location:

localStorage.topper = document.body.scrollTop;

и каждая страница имеет это в onLoad тела:

  if(localStorage.topper > 0){ 
    window.scrollTo(0,localStorage.topper);
  }

— AX Labs
источник

3

Было бы более элегантно использовать setItem () и getItem () из localStorage и вместо этого создавать резервную копию положения прокрутки при каждом нажатии ссылки, сохранять ее один раз при выходе со страницы: window.addEventListener ("beforeunload", function () {localStorage. setItem ("прокрутка", document.documentElement.scrollTop || document.body.scrollTop);});

— StanE