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