Как вернуться на предыдущую страницу в то же место по вертикали
Сегодня рассмотрим, как реализовать функционал возврата на предыдущую страницу в тоже место по вертикали, с которого мы перешли на текущую страницу. Будем делать возврат с плавной прокруткой до нужного места.
Допустим, у нас есть страница длинного каталога товаров. Нажав на ссылку на товар мы переходим на его страницу. А на ней помимо прочей информации есть ссылка “Назад”. И мы хотим нажимая на эту ссылку вернуться именно в то место по вертикали, с которого был сделан переход.
Реализация возврата на предыдущую страницу в нужное место по вертикали
Для демонстрации примера, я создам 2 простые .html страницы. Первая будет имитировать каталог. Одну из ссылок в середине страницы я выделю другим цветом, чтобы визуально было удобно определить, что возврат происходит куда нужно.
Эту страницу назову index.html.
Blog .colColumnColumnColumnColumnColumnColumnColumnColumnColumn
Выглядеть она будет примерно вот так.
В хедере вы можете видеть подключение файла script.js. Его мы пока не создали, но создадим чуть позже.
Вторая страница будет еще проще. Её я назову article.html и там не будет практически ничего, кроме подключения скриптов и ссылки обратно на index.html.
Article BACK
Скрипт возврата в нужное место по вертикали предыдущей страницы
Теперь создадим файл script.js, который мы уже подключили на обеих страницах. И пропишем туда следующий код.
$(document).ready( function() < $(function () < var pathName = document.location.pathname; window.onbeforeunload = function () < var scrollPosition = $(document).scrollTop(); sessionStorage.setItem("scrollPosition_" + pathName, scrollPosition.toString()); >if (sessionStorage["scrollPosition_" + pathName]) < $(document).scrollTop(sessionStorage.getItem("scrollPosition_" + pathName)); >>); >);
Здесь мы будем использовать событие onbeforeunload, которое произойдет, когда пользователь захочет перейти с одной страницы на другую. Когда произойдет это событие, то мы сохраним в переменную scrollPosition текущие положение на странице, после чего запишем его в сессию.
А далее мы будем проверять, есть ли у нас в сессии соответствующая переменная и если она есть, то будем прокручивать страницу до нужного места.
Скрипт можно модернизировать под свои потребности. В данном случае я добавляю к имени переменной, которую мы сохраняем в сессии pathName, чтобы прокрутка происходила именно на нужной странице, а не на всех подряд.
При необходимости вы можете также очищать sessionStorage. Всё зависит от конкретной задачи. Это основной подход, который работает. Надеюсь пост был вам полезен.
Возврат к позиции на странице при нажатии «Назад»
Почему так? Как сделать, чтобы Хром и Опера вели себя подобно Мозилле?
Отслеживать
задан 1 авг 2012 в 21:15
WinnieRazor WinnieRazor
43 1 1 серебряный знак 7 7 бронзовых знаков
Что есть курсор? Прокрутка страницы на нужное место?
2 авг 2012 в 6:56
да, именно. мне нужно, чтобы пользователь вернулся на предыдущую страницу и не листал заново до того места, откуда ушел
2 авг 2012 в 12:09
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Как я недавно узнал, в Chrome не реализован «bfcache», т.е. в Firefox кнопка «Назад» (если хватило памяти) просто возвращает страницу в том виде, в котором она была в момент ухода, а в Chrome всегда перезагружает ее «с чистого листа», не сохраняя модификации, которые вы внесли через JS. Соответственно, того места страницы, откуда пользователь ушел, уже просто нет.
Ну и в Firefox это тоже не всегда работает — зависит от того, сколько у юзера памяти, не перезагружал ли он Firefox и т.п.
- При прокрутке обновлять URL страницы ( pushState в современных браузерах, «hashbang» (http://example.org/products#!page5) в более старых — если в них вообще нужна бесконечная прокрутка).
- При загрузке в случае с pushState сервер должен уметь возвращать правильный кусок страницы по URL, а для hashbang-решения JS в onload дозагружает и отображает нужный кусок.
Как вернуться на прошлую страницу в браузере
Репутация: 10
Google Chrome. Как включить функцию «вернуться назад»?
В последних версиях браузера гугл хром нет возможности вернуться на предыдущую страницу. Стрелка «назад» не работает. Это создаёт сильное неудобство при просмотре веб-сайтов. И ни одно из известных расширений то же не активирует эту кнопку.
Как решить эту проблему? Как включить функцию «вернуться назад»?
| 03.12.2018, 17:09 | |
| Helpmaster | |
Регистрация: 08.03.2016
Если кнопка Назад в Chrome обратно не возвращает
… притом она хитро не работает. Кликаешь ссылку на странице, а потом, когда хочешь вернуться, то оказывается, что кнопка Назад браузера сколько её не жми, на предыдущую страницу или сайт уже не возвращает.
Разумеется, сделана такая «засада» специально и с корыстью. Просто, кому-то надо, чтобы посетитель сайта слишком шустро не сбегал, а задержался подольше.
Даже когда контент на странице ему не понравился либо его как такового там вообще нет.
К слову, в англоязычном сегменте Сети для таких фокусов даже отдельный термин придумали back button hijacking (буквально, «угон кнопки Назад»). И надо сказать, что придумали далеко не вчера. То бишь, проблема эта существует давно и успешно.
Google, как глобальный лидер и мегаавторитет в деле онлайн-поиска, конечно, со своей стороны, и с этой проблемой тоже борется давненько. Но раньше получалось как-то не очень…
- Очистить историю в Chrome: почему не получается, и что делать
- Принудительный темный режим на сайтах в Chrome
- Что делать, если Chrome блокирует кнопки управления плеером
И вот, спустя несколько лет упорной борьбы компания выдала очередное решение, направленное против недобросовестных веб-мастеров и владельцев сайтов, позволяющих себе такого рода «шутки» с кнопкой Назад. В общем.
что делать, когда кнопка Назад браузера обратно не возвращает
Новое решение специалисты Google реализовали, само собой, в фирменном браузере Chrome. Притом сейчас оно уже работает не только в обычной компьютерной, но и в Android-версии.
Так что, если в Сеть вы ходите посредством Chrome и каким-то образом снова попали на сайт, где кнопка Назад не работает, а точнее обратно на предыдущую страницу (или сайт) как положено не возвращает, то:
- вместо стандартного быстрого клика или тапа по стрелке «Назад» просто нажмите на неё и подержите, либо тапните и подержиет кнопку «Назад» на панели навигации Android-смартфона или планшета (долгий тап);
- Chrome через секунду выдаст список последних открытых страниц, а также линк на «Всю историю» поиска;
- в нем вы кликаете/тапаете нужную, и Chrome тут же её откроет (то есть, фактически вернет вас обратно на предыдущую страницу или просто на ту, которую вы указали) в обход упомянутых хитрых фокусов с перенаправлением.
Теперь вот в Chrome есть и такое. На всякий случай отметим, что в Android-версии браузера данная фича (список последних открытых страниц долгим тапом по стрелке «Назад«) не работает, если в Chrome включено управление жестами.
И еще, справедливости ради, тоже отметим, что такая функция есть не только в Chrome. Аналогичное решение недавно появилось также в обычном и в мобильном Firefox.