Как реализовать работу ajax-подгрузки данных в каталоге и кнопку назад в браузере?

Question

[Андрей]

Добрый день!

Есть сайт, с каталогом, очень большим, очень-очень! Страницы в каталоге подгружаются вниз автоматом, как в контакте, к примеру. Есть так же юзеры, которые переходят по товарам и потом жмут кнопку назад. Конечно же, когда он нажимает назад из товара и попадает на страницу каталога – он видит первую самую страницу.

Вопрос — как это побороть? Как сделать так, чтобы при нажатии назад он видел все, что уже загрузил?

Ломаю мозг, вариантов кроме как подгружать по хеш-тегу в адресе, типа #page-10 не вижу, но и это накладно, на мой взгляд.

Надо загрузить ту, что у него в теге и потом все предыдущие(

Помогите!

Answer 1

[Busla]

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

Answer 2

[Meliborn]

Api history

Comments

[Андрей]

Вы живете в мире розовых пони?
В конце статьи есть ссылка на github.com/balupton/History.js/, за это спасибо)
Посмотрю, попробую его. IE нет под рукой

Answer 3

[Петруша Укропов]

Писал камент, и браузер слетел, поэтому кратко:
например весь контент в блоке wrapper

Загрузка инфы об отдельном товаре должна происходить с помощью аякса в блок wrapper, заменяя прежнее содержимое. Но предварительно, перед заменой wrappera надо сохранить в кеш все содержимое и узнать насколько была проскролена страница.
Здесь обязателен хеш-тег, чтобы при нажатии на кнопку «назад» страница не перезагружалась.

Далее при нажатии на кнопку «назад», кеш обратно вставляем в блок wrapper и скролим страницу вниз.

Засыпаю, поэтому может быть немного непонятно. Чтобы понять, смотрим пример.

Пример: pastehtml не работает, поэтому вот jsfiddle.net/7W87S/2/
или так fiddle.jshell.net/7W87S/2/show/

Думаю чтобы не использовать хеш-теги, для хранения контента можно использовать локальное хранилище. А высоту скрола хранить в куках