Forcer la position de défilement de la page vers le haut lors de l'actualisation de la page en HTML

129

Je suis en train de créer un site Web que je publie avec divs. Lorsque j'actualise la page après son défilement jusqu'à la position X, la page est chargée avec la position de défilement X.

Comment puis-je forcer la page à faire défiler vers le haut lors de l'actualisation de la page?

  • Ce que je peux penser, c'est de l'exécution de JS ou jQuery en onLoad()fonction de la page pour définir les pages défiler vers le haut. Mais je ne sais pas comment je pourrais faire ça.

  • Une meilleure option serait s'il y a une propriété ou quelque chose pour que la page soit chargée avec sa position de défilement par défaut (c'est-à-dire en haut) qui sera un peu comme le chargement de la page , au lieu de l' actualisation de la page .

javascript jquery html pageload page-refresh Lune
la source
Étonnamment, aucune des solutions ici n'a fonctionné pour moi, mais celle-ci a fonctionné: stackoverflow.com/a/11486546/470749
Ryan

Réponses:

165

Pour un simple simple mise en œuvre JavaScript:

window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}
Développer l'extrait

ProfNandaa
la source
1
C'est la bonne réponse. La solution jQuery ne fonctionne pas dans tous les cas.
Harry Stevens
@ Paul12_ - Je viens de le tester Safari 11.0.3et fonctionne bien pour moi, lequel utilisez-vous?
ProfNandaa
Cela n'a pas fonctionné pour moi. J'ai dû revenir de la fonction onbeforeload pour que cela fonctionne.
Iqbal
@Iqbal - qu'avez-vous fait return?
ProfNandaa
1
l'ajout document.querySelector('html').style.scrollBehavior = '';peut également être nécessaire. S'il est défini sur smooth, il se peut qu'il ne parvienne pas en haut avant le rechargement de la page.
kevnk
35

La réponse ici ne fonctionne pas pour les safaris, document.ready est souvent renvoyé trop tôt.

Devrait utiliser l' beforeunloadévénement qui vous empêcherait de fairesetTimeout

$(window).on('beforeunload', function(){
  $(window).scrollTop(0);
});
Ben
la source
1
Ajouter après la fonction de défilement: $ ('html'). Text (''); , donc la poussette sera réinitialisée
user956584
1
@Userpassword Vous ne pensez pas que $ ("html"). Remove () serait mieux?
Ben
18

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 son "onbeforunload" :) Chrome et autres navigateurs "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 ont gagné ne revient pas à l'endroit où se trouvait la barre de défilement :)

xoxel
la source
@ Paul12_ Safari nécessite document.documentElement.scrollTopde fonctionner. Cependant, j'utilise généralement les deux.
Graham O'Mahony
9

Vérifiez la .scrollTop()fonction jQuery ici

Cela ressemblerait à quelque chose comme

$(document).load().scrollTop(0);
jon3laze
la source
9

Vous pouvez également essayer 

$(document).ready(function(){
    $(window).scrollTop(0);
});

Si vous souhaitez faire défiler à la position x, vous pouvez changer la valeur de 0 à x.

Ankit
la source
7

Au lieu de location.reload(), utilisez simplement location.href = location.href. Il ne défilera pas jusqu'à la position précédente comme le location.reload()fait.

Remarque: cela ne se rechargera pas s'il y a un # dans l'URL

Nauphal
la source
4 
<script> location.hash = (location.hash) ? location.hash : " "; </script>

Mettez le script ci-dessus dans la <head>balise de votre html. Je ne sais pas comment les applications à page unique se comportent! Mais fonctionne comme du charme dans les pages régulières.

durs53
la source
4

La réponse ici (défilement $(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, écrasant notre travail.

La meilleure réponse devrait être:

$(window).on('beforeunload', function(){
    $(window).scrollTop(0);
});
DrPollit0
la source
3 
$(document).ready(function(){
    $(window).scrollTop(0);
});

ne fonctionnait pas pour moi car Google Chrome ferait simplement défiler vers le bas une fois le chargement de la page terminé. 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);
    }
});

// Ceci charge la page avec un # à la fin. Donc, il se chargera toujours en haut.

Daut
la source
3

Pour réinitialiser la fenêtre, faites défiler vers le haut, $(window).scrollTop(0)dans l'événement beforeunload fait les astuces, cependant, j'ai testé dans Chrome 80, il reviendra à l'ancien emplacement après le rechargement.

Pour éviter cela, définissez le history.scrollRestorationsur "manual".

//Reset scroll top

history.scrollRestoration = "manual";

$(window).on('beforeunload', function(){
      $(window).scrollTop(0);
});
Alex s'amuse
la source
C'est la meilleure réponse pour moi, fonctionne sur Chrome / Linux
SNS - Web et Informatique
0

La réponse supercalifragilisticexpialidocious est:

ajoutez ceci en haut de votre fichier js ou de votre balise de script

document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

document.body.scrollTop = 0; // For Safari
Nicobels
la source