web-dev-qa-db-fra.com

Forcer le 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 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 sous la forme X.

Comment forcer le défilement de la page vers le haut lors de l'actualisation de la page?

  • Ce que je peux penser est de certains JS ou jQuery exécutés comme onLoad() fonction de la page à SET les pages défilent 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 charger une page , au lieu de actualiser la page .

javascriptjqueryhtmlpageloadpage-refresh
107
Moon

Vous pouvez le faire en utilisant la méthode scrollTop sur DOM ready :

$(document).ready(function(){
    $(this).scrollTop(0);
});
147
Pat

Pour une implémentation JavaScript simple simple :

window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}
139
ProfNandaa

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

Doit utiliser l'événement beforeunload qui vous empêche de faire quelques setTimeout

$(window).on('beforeunload', function(){
  $(window).scrollTop(0);
});
34
Ben

Encore une fois, la meilleure réponse est:

window.onbeforeunload = function () { window.scrollTo(0,0);

(c'est pour jQuery non, cherchez si vous cherchez la méthode JQ)

EDIT: une petite erreur c'est "onbeforunload" :) _ Chrome et les autres navigateurs "se souviennent" de la dernière position de défilement avant le déchargement, donc si vous définissez la valeur sur 0,0 juste avant le déchargement de votre page, ils rappelez-vous de 0,0 et ne revenez pas à l'endroit où se trouvait la barre de défilement :)

11
xoxel

Vérifiez la fonction jQuery .scrollTop()ici

Ça ressemblerait à quelque chose comme

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

Vous pouvez aussi essayer

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

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

9
Ankitkumar Bhatt

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

Note: Ceci ne rechargera pas s'il y a des # dans l'URL

7
Nauphal
<script> location.hash = (location.hash) ? location.hash : " "; </script>

Mettez le script ci-dessus dans la balise <head> de votre code HTML. Vous ne savez pas comment les applications d'une page se comportent! Mais bien sûr, fonctionne comme un charme dans les pages régulières.

4
harshes53

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, annulant ainsi notre travail.

La meilleure réponse devrait être:

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

ne fonctionnait pas pour moi, car Google chrome revenait simplement à la fin du 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);
    }
});

// Ceci charge la page avec un # à la fin. Donc, il sera toujours chargé en haut.

3
Daut

La réponse supercalifragilisticexpialidocious est:

ajoutez ceci en haut de votre fichier js ou balise script

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

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