Как вернуться к нужной позиции на странице при нажатии кнопки Назад?

Question

[Михаил Завалко]

Всем привет! Мучает вопрос, не смог найти на него ответ сам. У меня есть страница каталога с товарами, написал небольшой скриптик, чтобы отображались только первые 4 позиции, остальные открываются при нажатии на кнопку "показать все". При переходе на любую из видимых позиций и возврате из них обратно, возвращаешься к месту на странице откуда нажал на ссылку, но вот если отобразить все позиции и перейти по любой из них, то возвращает на страницу со скрытыми товарами. Может как то усложнить, чтобы при возврате все было как и в первом случае? А то не очень красиво получается.

Answer 1

[Pretor DH]

Делается просто:

По событию onscroll пишем в localStorage.scrollTop заначение скрола.
По событию onload читаем из localStorage.scrollTop и устанавливаем позицию scrollTop у элемента с главным скролом.

selector = 'body';   /* <--- cюда положи селетор на элемент с основным скролом */
$('document').on('load', function(){ $(selector).attr('scrollTop', localStorage.scrollTop); }
$(selector).on('scroll', function(){ localStorage.scrollTop = $(selector).attr('scrollTop'); }

P.S. Для юзабельности, обязятельно должен быть элемент перемещающий на начало страницы.

Comments

[Михаил Завалко]

Вот я тоже пришел к этому решению, но не могу найти пример хоть какого то кода, как самому написать не особо понимаю.

[Pretor DH]

Накидал наскорую решение. А вообще учи матчасть.

[Михаил Завалко]

Pretor DH: ок, спасибо большое, пошел учить)

Answer 2

[Илья Караваев]

Эту процедуру делает за Вас браузер. Если вы хотите иначе. Вам нужно писать JS-скрипт, который будет мониторить данные перемещения и открывать спрятанный список. Один из вариантов - якоря + history для изменения адресной строки. Тот же history может отслеживать, вернулся ли пользователь по ссылке. А Вам всего то и нужно применить знания о якоре для открытия списка.

Comments

[Михаил Завалко]

Спасибо, понял в каком направлении копать, а вот если у меня каталог на wordpress и позиций очень много, порядка 600 штук, то каждому придется как то раздавать эти якоря?

[Илья Караваев]

Mixa_007: Можно динамически генерировать $link = "site.com/items#item_{$item['id']}";

[Михаил Завалко]

Илья Караваев: а может кнопку для открытия невидимых пунктов сделать на Ajax и не придется раздавать якоря? Может получиться?

[Илья Караваев]

Mixa_007: может. Но вам нужно как-то проследить, нажималась ли кнопка открытия пунктов. Якоря лишь один из простых способов. Копайте глубже, может есть какой то параметр, который Вам поможет определить состояние страницы.

[Михаил Завалко]

Илья Караваев: ну да, я почитал про Ajax, на нем как раз не работает такое, как пример сайт ДНС, а вот в ВК есть, если со страницы новостей залезть к кому то а затем вернуться, то откроется то же место откуда переходил.

[Илья Караваев]

Mixa_007: они считывают координаты открытой страницы. Плюс кэширование. Плюс тот же history для изменения адресной строки без перезагрузки. У ВК комплекс мер. Вы тоже можете пробовать все это делать. Но у них контент по умолчанию загружается по ajax полностью, вы же делаете это частично.

Answer 3

[FedorBarilyuk]

Уточнение ответа Pretor DH

selector = 'body';   /* <--- cюда положить селетор на элемент с основным скролом */
$(selector).on('scroll', function(){
        sessionStorage['scrollTop'] = $(selector).scrollTop();
});
$(document).ready( function(){
        $(selector).scrollTop(sessionStorage['scrollTop']);
});