Як отримати та встановити поточну позицію прокрутки веб-сторінки?

121

Як я можу отримати та встановити поточну позицію прокрутки веб-сторінки?

У мене довга форма, яку потрібно оновити на основі дій / вводу користувача. Коли це трапляється, сторінка скидається до самого верху, що дратує користувачів, оскільки їм доведеться прокручувати назад до тієї точки, в якій вони були.

Якщо я міг би зафіксувати поточну позицію прокрутки (прихованим входом) до того, як сторінка перезавантажиться, я могла б встановити її назад після її завантаження.

javascript html

— ксиз
джерело

Чи не керована AJAX форма не є кращим способом запобігти цим ефектам (і, звичайно, забезпечити резервний випадок, якщо XHR недоступний)? При повторному завантаженні сторінки з’явиться сторінка, щоб перестрибнути на вершину та назад знову, примха, яка може дратувати.

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

118

Ви шукаєте document.documentElement.scrollTopнерухомість.

— SLaks
джерело

дякую, я знайшов це: articles.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

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" });

— тобек
джерело

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-елементах. Однак, щоб уникнути тестування та налагодження, я завжди покладаюся на безпечну та послідовну сторінкуXOffset / pageYOffset.

— gyo

1

велике спасибі за правильну відповідь

— Michael Paccione

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 ("перед завантаженням", функцією () {localStorage. setItem ("scrolly", document.documentElement.scrollTop || document.body.scrollTop);});

— StanE