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

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