jQuery Faire défiler vers le bas de la page / iframe

Comment utiliser jquery pour faire défiler vers le bas jusqu'au bas d'une iframe ou d'une page?

Si vous voulez un joli défilement d'animation lent, pour toute ancre avec href="#bottom"cela vous fera défiler vers le bas:

$("a[href='#bottom']").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});

N'hésitez pas à changer le sélecteur.

scrollTop () renvoie le nombre de pixels masqués de la zone de défilement, ce qui donne:

$(document).height()

dépassera en fait le bas de la page. Pour que le défilement s'arrête réellement au bas de la page, la hauteur actuelle de la fenêtre du navigateur doit être soustraite. Cela permettra l'utilisation de l'assouplissement si nécessaire, il devient donc:

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

Par exemple:

$('html, body').scrollTop($(document).height());

Après que ce fil n'a pas fonctionné pour moi pour mes besoins spécifiques (faire défiler un élément particulier, dans mon cas une zone de texte), j'ai découvert cela dans le grand au-delà, ce qui pourrait s'avérer utile à quelqu'un d'autre lisant cette discussion:

Alternative sur planetcloud

Puisque j'avais déjà une version en cache de mon objet jQuery (le myPaneldans le code ci-dessous est l'objet jQuery), le code que j'ai ajouté à mon gestionnaire d'événements était simplement le suivant:

myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());

(merci Ben)

Une fonction simple qui saute (défile instantanément) au bas de la page entière. Il utilise le intégré .scrollTop(). Je n'ai pas essayé de l'adapter pour travailler avec des éléments de page individuels.

function jumpToPageBottom() {
    $('html, body').scrollTop( $(document).height() - $(window).height() );
}

Celui-ci a fonctionné pour moi:

var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
  // We're at the bottom.
}

Si vous ne vous souciez pas de l'animation, vous n'avez pas besoin d'obtenir la hauteur de l'élément. Au moins dans tous les navigateurs que j'ai essayés, si vous donnez scrollTopun nombre supérieur au maximum, il ne fera que défiler vers le bas. Alors donnez-lui le plus grand nombre possible:

$(myScrollingElement).scrollTop(Number.MAX_SAFE_INTEGER);

Si vous voulez faire défiler la page, plutôt qu'un élément avec une barre de défilement, faites simplement myScrollingElementégal à 'body, html'.

Comme je dois le faire à plusieurs endroits, j'ai écrit une fonction jQuery rapide et sale pour la rendre plus pratique, comme ceci:

(function($) {
  $.fn.scrollToBottom = function() {
    return this.each(function (i, element) {
      $(element).scrollTop(Number.MAX_SAFE_INTEGER);
    });
  };
}(jQuery));

Je peux donc faire cela lorsque j'ajoute un truc de buncho:

$(myScrollingElement).append(lotsOfHtml).scrollToBottom();

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

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

ou

$(window).scrollTop($(document).height());

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.

$('.block').scrollTop($('.block')[0].scrollHeight);

J'utilise ce code pour faire défiler le chat lorsque de nouveaux messages arrivent.