Запретить обновление "Jump" с помощью Javascript
Я заметил, что если вы находитесь на странице, и вы прокручиваете хороший бит, если вы обновите страницу, большинство браузеров вернут вас к вашей позиции. Есть ли способ предотвратить это?
Я рассмотрел два варианта и не совместим с Webkit/Firefox.
window.scrollTo(0, 1);
$('html, body').animate({ scrollTop: 0 }, 0);
Любые идеи?
Вы можете проверить результат поиска Google для примера.
Ответы
Ответ 1
Я не вижу причин, почему это не должно работать во всех браузерах, похоже, работает для меня (только с одной функцией для window.onload, используйте больше, и могут быть проблемы)?
window.onload = function() {
scrollTo(0,0);
}
Чтобы заставить его работать, когда нажата кнопка "Назад", возможно, что-то вроде этого:
<body onunload="">
<script type="text/javascript">
window.onload = function() {
scrollTo(0,0);
}
</script>
//content here
</body>
Ответ 2
Работает для меня:
// Scroll top bro
window.onload = function() {
setTimeout (function () {
scrollTo(0,0);
}, 0);
}
Ответ 3
В Chrome, даже если вы заставите scrollTop на 0, он будет прыгать после первого события прокрутки.
Вы должны привязать прокрутку к следующему:
$(window).on('beforeunload', function() {
$(window).scrollTop(0);
});
Итак, браузер обманом полагает, что он был в начале перед обновлением.
Ответ 4
Что-то вроде ниже работает для меня, создайте элемент, который можно сфокусировать, и сфокусируйте его, чтобы прокрутить страницу.
В этом случае он будет прокручиваться назад, после обновления страницы.
Проверено на последнем IE/FF/Chrome.
<html>
<head>
<script type="text/javascript">
window.onload = function () {
setTimeout (function () {
// use both 'a' and 'button' because 'a' not work as expected on some browsers
document.getElementById('top_anchor').focus();
document.getElementById('top_anchor_btn').focus();
}, 0);
}
</script>
</head>
<body>
<a id="top_anchor" href="" style="width: 1px; height: 1px; position: absolute; top: 0px; left: -1000px;"></a>
<button id="top_anchor_btn" href="" style="width: 1px; height: 1px; position: absolute; top: 0px; left: -1000px;"></button>
<div> top </div>
<div style="width: 500px; height: 2000px; background-color: #83FEBC;">
content
</div>
</body>
</html>
Привет,
Бен
Ответ 5
Просто для обновления того, что сказал @josetapadas, для последних версий было бы лучше использовать функцию unload
вместо beforeunload
, это будет
$(window).on('unload', function() {
$(window).scrollTop(0);
});