Forcer la position de défilement de la page vers le haut lors de l'actualisation de la page en HTML
Je construis un site Web que je publie avec div s. Lorsque j'actualise la page après qu'elle a été défilée à la position X, la page est chargée avec la position de défilement X.
Comment puis-je forcer la page à défiler vers le haut lors de l'actualisation de la page?
Ce que je peux penser est de certains js ou jQuery exécutés en tant que
onLoad()fonction de la page à SET les pages défilent vers le haut. Mais je ne sais pas comment j'ai pu faire ça.Une meilleure option serait si il y est-ce qu'une propriété ou quelque chose d'avoir la page chargée avec sa position de défilement par défaut (c'est-à-dire en haut) qui sera un peu comme page load, au lieu de page refresh.
10 réponses
Pour une implémentation JavaScript simple plain:
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}La réponse ici ne fonctionne pas pour safari, document.prêt est souvent tiré trop tôt.
Devrait utiliser l'événement beforeunload qui vous empêche de faire des setTimeout
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
Vous pouvez également essayer
$(document).ready(function(){
$(window).scrollTop(0);
});
Si vous voulez faire défiler à la position x que vous pouvez changer la valeur de 0 à X.
Encore une fois, la meilleure réponse est:
window.onbeforeunload = function () {
window.scrollTo(0,0);
(c'est pour non-jQuery, recherchez si vous recherchez la méthode JQ)
EDIT: une petite erreur c'est " onbeforunload" :) Les navigateurs Chrome et autres "se souviennent" de la dernière position de défilement avant le déchargement, donc si vous définissez la valeur à 0,0 juste avant le déchargement de votre page, ils se souviendront de 0,0 et ne reviendront pas à l'endroit où la barre de défilement était :)
La réponse ici (défilement dans $(document).ready) ne fonctionne pas s'il y a une vidéo dans la page. Dans ce cas, la page défile après le déclenchement de cet événement, remplaçant notre travail.
La meilleure réponse devrait être:
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
Au lieu de location.reload(), utilisez simplement location.href = location.href. Il ne défilera pas à la position précédente comme le fait location.reload().
Remarque: cela ne se rechargera pas s'il y a un # dans L'URL
<script> location.hash = (location.hash) ? location.hash : " "; </script>
Mettez le script ci - dessus dans la balise <head> de votre code html. Je ne sais pas comment les applications d'une seule page se comportent! Mais sûr fonctionne comme charme dans les pages régulières.
$(document).ready(function(){
$(window).scrollTop(0);
});
N'a pas fonctionné pour moi car google chrome ferait simplement défiler vers le bas après le chargement de la page. Ce que j'ai utilisé était
$(document).ready(function() {
var url = window.location.href;
console.log(url);
if( url.indexOf('#') < 0 ) {
window.location.replace(url + "#");
} else {
window.location.replace(url);
}
});
// cela charge la page avec un # à la fin. Donc, il sera toujours charger en haut.