Как вернуться на предыдущую страницу в то же место по вертикали

/ 👁 138

Сегодня рассмотрим, как реализовать функционал возврата на предыдущую страницу в тоже место по вертикали, с которого мы перешли на текущую страницу. Будем делать возврат с плавной прокруткой до нужного места.

Допустим, у нас есть страница длинного каталога товаров. Нажав на ссылку на товар мы переходим на его страницу. А на ней помимо прочей информации есть ссылка “Назад”. И мы хотим нажимая на эту ссылку вернуться именно в то место по вертикали, с которого был сделан переход.

Реализация возврата на предыдущую страницу в нужное место по вертикали

Для демонстрации примера, я создам 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. Всё зависит от конкретной задачи. Это основной подход, который работает. Надеюсь пост был вам полезен.

Leave a Reply