Сегодня рассмотрим, как реализовать функционал возврата на предыдущую страницу в тоже место по вертикали, с которого мы перешли на текущую страницу. Будем делать возврат с плавной прокруткой до нужного места.
Допустим, у нас есть страница длинного каталога товаров. Нажав на ссылку на товар мы переходим на его страницу. А на ней помимо прочей информации есть ссылка “Назад”. И мы хотим нажимая на эту ссылку вернуться именно в то место по вертикали, с которого был сделан переход.
Реализация возврата на предыдущую страницу в нужное место по вертикали
Для демонстрации примера, я создам 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. Всё зависит от конкретной задачи. Это основной подход, который работает. Надеюсь пост был вам полезен.
