Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Что мне нужно изменить в шаблоне ленда html?

VladVolik Ученик (80), на голосовании 1 месяц назад
Что мне нужно изменить в шаблоне ленда html? Когда я, находясь в футере, перезагружаю его страницу, она открывается в хедере. А мне нужно что бы страница открывалась в том же месте, находясь где я ее перезагрузил.
Голосование за лучший ответ
не соник но тейлз Гуру (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
Похожие вопросы