Comment faire défiler le haut de la page avec JavaScript/jQuery ?

Question

Existe-t-il un moyen de contrôler le défilement du navigateur avec JavaScript/jQuery ?

Lorsque je fais défiler ma page à mi-chemin vers le bas, puis que je déclenche un rechargement, je veux que la page revienne en haut, mais au lieu de cela, elle essaie de trouver la dernière position de défilement. J'ai donc fait ceci :

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

Mais pas de chance.

EDIT :

Vos deux réponses ont donc fonctionné lorsque je les ai appelées après le chargement de la page - Merci. Cependant, si je rafraîchis la page, il semble que le navigateur calcule et revienne à son ancienne position de défilement APRÈS l'appel de la commande .ready (j'ai également testé la fonction onload() du corps).

La question qui se pose est donc la suivante : existe-t-il un moyen d'EMPECHER le navigateur de défiler jusqu'à sa position précédente, ou de le faire défiler à nouveau jusqu'en haut APRÈS qu'il ait fait son travail ?

Answer 1

Solution multi-navigateurs, purement JavaScript :

document.body.scrollTop = document.documentElement.scrollTop = 0;

Answer 2

Vous presque Je l'ai - vous devez définir le scrollTop en body pas window :

$(function() {
   $('body').scrollTop(0);
});

EDIT :

Vous pouvez peut-être ajouter une ancre vide en haut de la page :

$(function() {
   $('<a name="top"/>').insertBefore($('body').children().eq(0));
   window.location.hash = 'top';
});

Answer 3

Existe-t-il un moyen d'EMPECHER que le navigateur de défiler jusqu'à sa position précédente, ou de défiler à nouveau vers le haut APRÈS qu'il ait fait son son action ?

La solution jquery suivante fonctionne pour moi :

$(window).unload(function() {
    $('body').scrollTop(0);
});

Answer 4

Voici une version de défilement animé en JavaScript pur pour ceux qui n'utilisent pas JQuery :D

var stepTime = 20;
var docBody = document.body;
var focElem = document.documentElement;

var scrollAnimationStep = function (initPos, stepAmount) {
    var newPos = initPos - stepAmount > 0 ? initPos - stepAmount : 0;

    docBody.scrollTop = focElem.scrollTop = newPos;

    newPos && setTimeout(function () {
        scrollAnimationStep(newPos, stepAmount);
    }, stepTime);
}

var scrollTopAnimated = function (speed) {
    var topOffset = docBody.scrollTop || focElem.scrollTop;
    var stepAmount = topOffset;

    speed && (stepAmount = (topOffset * stepTime)/speed);

    scrollAnimationStep(topOffset, stepAmount);
};

Et puis :

<button onclick="scrollTopAnimated(1000)">Scroll Top</button>

Answer 5

Cela fonctionne pour moi :

window.onload = function() {
    // short timeout
    setTimeout(function() {
        $(document.body).scrollTop(0);
    }, 15);
};

Utilise un court setTimeout à l'intérieur de la onload pour donner au navigateur une chance de faire le scroll.