jQuery Scroll En bas de la page

196

Après le chargement de ma page. Je veux que jQUery défile bien vers le bas de la page, s'animant rapidement, pas un snap / jolt.

Ai-je besoin d'un plugin comme ScrollToça? ou est-ce intégré à jQuery?

jquery jquery-plugins Un apprenti
la source

Réponses:

416

Vous pouvez simplement animer pour faire défiler la page en animant la scrollToppropriété, aucun plugin requis, comme ceci:

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

Notez l'utilisation de window.onload(lorsque les images sont chargées ... qui occupent de la hauteur) plutôt que document.ready.

Pour être techniquement correct, vous devez soustraire la hauteur de la fenêtre, mais ce qui précède fonctionne:

$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });

Pour faire défiler jusqu'à un ID particulier, utilisez son .scrollTop(), comme ceci:

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);
Nick Craver
la source
2
Un autre problème, c'est quand cela semble fait, puis l'utilisateur essaie de remonter, pour un peu il est verrouillé, et fait un effet très cahotant, empêchant l'utilisateur de faire défiler vers le haut
AnApprentice
1
@AnApprentice - C'est parce que cela se produit rapidement (400 ms par défaut), je recommanderais juste un défilement rapide pour résoudre ce problème.
Nick Craver
3
Le verrou est dû au fait que la distance est coupée. Il anime au-delà de l'animation visible.
Josiah Ruddell
27
@NickCraver - avec la dernière version de jQuery .scrollTop () semble ne pas fonctionner pour faire défiler jusqu'à un ID particulier; avec .offset (). top devrait fonctionner: $("html, body").animate({ scrollTop: $("#myID").offset().top }, 1000);
Paolo Gibellini
3
Cette réponse doit être modifiée. $(document).height()est trop grande valeur pour la scrollToppropriété, vous pouvez le constater par l'assouplissement. Je pense que ça $(document).height() - window.innerHeightdevrait aller.
silvenon
22

quelque chose comme ça:

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);
Josiah Ruddell
la source
J'ai essayé de mettre à jour la cible en .write-comment et cela n'a pas fonctionné. Peut-être parce que cela est injecté dans la page?
AnApprentice
16 
$('html,body').animate({ scrollTop: 9999 }, 'slow');

Aussi simple que cela, 9999 pages de hauteur ... grande plage pour qu'il puisse atteindre le bas.

Alin Razvan
la source
1
Ce n'est pas parfait, car dans certains cas, même si c'est rare, il peut y avoir des pages plus longues que cela, en particulier des pages qui chargent dynamiquement un contenu illimité. Cela arrêtera le défilement à mi-chemin.
Akhil Gupta
13

Vous pouvez essayer ceci 

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});
Sarath Ak
la source
10 
$("div").scrollTop(1000);

Travaille pour moi. Défile vers le bas.

f123
la source
13
Pas si votre page dépasse 1 000 pixels.
Volomike
4

Les scripts mentionnés dans les réponses précédentes, comme:

$("body, html").animate({
    scrollTop: $(document).height()
}, 400)

ne fonctionnera pas dans Chrome et sera instable dans Safari au cas où la html balise en CSS a un overflow: auto;jeu de propriétés. Il m'a fallu près d'une heure pour comprendre.

Ilia Rostovtsev
la source
3

En utilisant 'document.body.clientHeight', vous pouvez obtenir la hauteur vue des éléments du corps 

$('html, body').animate({
    scrollTop: $("#particularDivision").offset().top - document.body.clientHeight + $("#particularDivision").height()
}, 1000);

cela défile à l'id 'particularDivision'

Anbu
la source
1

Pour jQuery 3, veuillez modifier

$ (fenêtre) .load (function () {$ ("html, body"). animate ({scrollTop: $ (document) .height ()}, 1000);})

à:

$ (window) .on ("load", function (e) {$ ("html, body"). animate ({scrollTop: $ (document) .height ()}, 1000);})

Adnan Tahir
la source
1 
function scrollToBottom() {
     $("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}

C'est le travail de solution de moi et vous trouvez, je suis sûr

Roshan Madusanka
la source
0

js

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;
codeskyblue
la source
Bien que ce code puisse aider à résoudre le problème, il n'explique pas pourquoi et / ou comment il répond à la question. Fournir ce contexte supplémentaire améliorerait considérablement sa valeur éducative à long terme. Veuillez modifier votre réponse pour ajouter des explications, y compris les limitations et hypothèses applicables.
Toby Speight
0 
$('#pagedwn').bind("click", function () {
        $('html, body').animate({ scrollTop:3031 },"fast");
        return false;
});

Cette solution a fonctionné pour moi. Il fonctionne rapidement dans Page Scroll Down.

vikram venkatesh
la source
0 
var pixelFromTop = 500;     
$('html, body').animate({ scrollTop: pixelFromTop  }, 1);

Donc, lorsque la page est ouverte, elle défile automatiquement après 1 milliseconde

WapShivam
la source