не соник но тейлз
Гуру
(3445)
2 месяца назад
1. Использование localStorage (рекомендуемый способ):
Этот метод использует локальное хранилище браузера, чтобы запомнить положение прокрутки перед перезагрузкой и восстановить его после.
Добавьте этот JavaScript код перед закрывающим тегом </body> в вашем HTML-файле:
<script>
// Сохраняем положение прокрутки перед перезагрузкой
window.addEventListener('beforeunload', function() {
localStorage.setItem('scrollPosition', window.scrollY);
});
// Восстанавливаем положение прокрутки после загрузки страницы
window.addEventListener('load', function() {
if (localStorage.getItem('scrollPosition') !== null) {
window.scrollTo(0, localStorage.getItem('scrollPosition'));
localStorage.removeItem('scrollPosition'); // Очищаем после использования (опционально)
}
});
</script>
html
Объяснение кода:
beforeunload: Это событие срабатывает непосредственно перед тем, как страница будет выгружена (например, при перезагрузке).
localStorage.setItem('scrollPosition', window.scrollY);: Сохраняет текущую позицию вертикальной прокрутки (window.scrollY) в localStorage под ключом scrollPosition.
load: Это событие срабатывает после полной загрузки страницы.
localStorage.getItem('scrollPosition'): Извлекает сохраненную позицию прокрутки из localStorage.
window.scrollTo(0, localStorage.getItem('scrollPosition'));: Перемещает страницу в сохраненное положение прокрутки.
localStorage.removeItem('scrollPosition');: Очищает значение из localStorage. Это полезно, если вы не хотите, чтобы позиция прокрутки сохранялась при каждом перезаходе на страницу, а только при перезагрузке.
2. Использование якорей (менее предпочтительный способ):
Этот метод предполагает использование якорей и JavaScript для перемещения к якорю после загрузки.
Добавьте якорь в футере:
<footer id="footer">
<!-- Ваш код футера -->
</footer>
html
Добавьте следующий JavaScript код перед закрывающим тегом </body>:
<script>
// Восстанавливаем положение прокрутки после загрузки страницы
window.addEventListener('load', function() {
if (window.location.hash === '#footer') {
location.hash = '#footer'; // Это должно сработать, если якорь уже в URL
} else {
// Если якоря нет в URL, то ничего не делаем (остаемся вверху страницы)
}
});
</script>
html
Проблема с этим методом: Этот метод работает только в том случае, если вы вручную добавите #footer в URL перед перезагрузкой.
3. Использование Session Storage (альтернатива localStorage):
SessionStorage работает так же, как и localStorage, но данные хранятся только до закрытия вкладки или окна браузера. Если вам не нужно сохранять позицию прокрутки между сеансами, это может быть лучшим вариантом.
<script>
// Сохраняем положение прокрутки перед перезагрузкой
window.addEventListener('beforeunload', function() {
sessionStorage.setItem('scrollPosition', window.scrollY);
});
// Восстанавливаем положение прокрутки после загрузки страницы
window.addEventListener('load', function() {
if (sessionStorage.getItem('scrollPosition') !== null) {
window.scrollTo(0, sessionStorage.getItem('scrollPosition'));
sessionStorage.removeItem('scrollPosition'); // Очищаем после использования (опционально)
}
});
</script>
html