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 .

— Lune
source

Étonnamment, aucune des solutions ici n'a fonctionné pour moi, mais celle-ci a fonctionné: stackoverflow.com/a/11486546/470749

— Ryan

165

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

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

— Tapoter
source

9

Ne fonctionne pas sur Safari. Mais ceci -> stackoverflow.com/a/18633915/102133 le fait.

— Ben

165

Pour un simple simple mise en œuvre JavaScript:

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

Développer l'extrait

— ProfNandaa
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
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
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
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
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
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
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
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
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
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
source