Сегодня рассмотрим, как реализовать функционал возврата на предыдущую страницу в тоже место по вертикали, с которого мы перешли на текущую страницу. Будем делать возврат с плавной прокруткой до нужного места.
Допустим, у нас есть страница длинного каталога товаров. Нажав на ссылку на товар мы переходим на его страницу. А на ней помимо прочей информации есть ссылка “Назад”. И мы хотим нажимая на эту ссылку вернуться именно в то место по вертикали, с которого был сделан переход.
Реализация возврата на предыдущую страницу в нужное место по вертикали
Для демонстрации примера, я создам 2 простые .html страницы. Первая будет имитировать каталог. Одну из ссылок в середине страницы я выделю другим цветом, чтобы визуально было удобно определить, что возврат происходит куда нужно.
Эту страницу назову index.html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Blog</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script type="text/javascript" src="script.js"></script> <style> .col{ height: 500px; background-color: lightgrey; border: 1px solid darkgray; margin: 30px; } </style> </head> <body> <div class="container text-center"> <div class="row"> <div class="col"> Column </div> <div class="col"> Column </div> <div class="col"> Column </div> </div> <div class="row"> <div class="col"> Column </div> <div class="col" style="background: palevioletred;"> <a href="article.html"> Column </a> </div> <div class="col"> Column </div> </div> <div class="row"> <div class="col"> Column </div> <div class="col"> Column </div> <div class="col"> Column </div> </div> </div> </body> </html>
Выглядеть она будет примерно вот так.
В хедере вы можете видеть подключение файла script.js. Его мы пока не создали, но создадим чуть позже.
Вторая страница будет еще проще. Её я назову article.html и там не будет практически ничего, кроме подключения скриптов и ссылки обратно на index.html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Article</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <a href="index.html">BACK</a> </body> </html>
Скрипт возврата в нужное место по вертикали предыдущей страницы
Теперь создадим файл 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. Всё зависит от конкретной задачи. Это основной подход, который работает. Надеюсь пост был вам полезен.