2

На одной странице сайта необходимо, чтобы при обновлении страницы пользователю показывалась та часть странице, где он находился. Т.е. если он прокрутил вниз и обновил страницу, то автоматически он остался внизу. Предполагаю, что это делается с помощью localStorage, но пока не понимаю как именно. Информацию в интернете найти не смог, странно.

На странице не просто текст, но и div, img.. мало ли это важно..

2 ответа 2

2
let cords = ['scrollX','scrollY'];
// Перед закрытием записываем в локалсторадж window.scrollX и window.scrollY как scrollX и scrollY
window.addEventListener('unload', e => cords.forEach(cord => localStorage[cord] = window[cord]));
// Прокручиваем страницу к scrollX и scrollY из localStorage (либо 0,0 если там еще ничего нет)
window.scroll(...cords.map(cord => localStorage[cord]));
4
  • Вы бы хоть пояснили, что код делает =) А то очень много ES6 с которым еще не все умеют работать
    – alexoander
    1 июн 2017 в 8:09
  • Хотя решение хорошее
    – alexoander
    1 июн 2017 в 8:09
  • @alexoander добавил комментарии. Уже ES8 на носу
    – Darth
    1 июн 2017 в 8:13
  • не забываем про legacy и вообще незачем гнаться впереди хвоста. Спасибо!
    – alexoander
    1 июн 2017 в 8:17
-1

$(window).scroll(function(){
  var s= $(this).scrollTop();
  console.log(s );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>12</div>
<div>12</div><div>12</div><div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>
<div>12</div>

Можно использовать scrollTop() для хранения позиции прокрутки. Это значение можно сохранить в localStorage , а потом скормить этой же функции, чтобы перейти на это значение на странице. Одно но - для такого перехода необходимо,чтобы весь DOM был уже построен и нарисован иначе будут ошибки.

2
  • А если прокрутка горизонтальная?
    – Darth
    1 июн 2017 в 8:27
  • @Darth По аналогии с scrollLeft();
    – alexoander
    1 июн 2017 в 8:32

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.