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

ScrollTop () renvoie le nombre de pixels cachés de la zone de défilement, ce qui lui donne:

$(document).height()

Va effectivement dépasser 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, donc il devient:

$('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 mon besoin spécifique (défilement à l'intérieur d'un élément particulier, dans mon cas une zone de texte), j'ai découvert cela dans The great beyond, ce qui pourrait s'avérer utile à quelqu'un d'autre en lisant cette discussion:

Alternative sur planetcloud

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

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 haut-.scrollTop(). Je n'ai pas essayé d'adapter cela 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é, si vous donnez scrollTop un nombre plus grand que le maximum, il va juste faire 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 un jQuery rapide et sale fonction pour le rendre plus pratique, comme ceci:

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

Donc je peux le faire quand j'ajoute un truc 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 jumpy dans Safari en cas html balise CSS a overflow: auto; ensemble de propriétés. Il m'a fallu près d'une heure à comprendre.