web-dev-qa-db-fra.com

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

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

jqueryscrollscrollto
216
Adam

Si vous voulez un défilement d'animation lente Nice, pour toute ancre avec href="#bottom" ceci 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 de sélecteur.

349
Mark Ursino

scrollTop () renvoie le nombre de pixels masqués de la zone de défilement, en donnant ainsi:

$(document).height()

va effectivement dépasser le bas de la page. Pour que le défilement "s'arrête" au bas de la page, il faut soustraire la hauteur actuelle de la fenêtre du navigateur. Cela permettra d’utiliser l’assouplissement si nécessaire, de sorte qu’il devient:

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

Par exemple:

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

Après que ce fil n'ait pas fonctionné pour mon besoin spécifique (faire défiler à l'intérieur d'un élément particulier, dans mon cas un texte), je l'ai découvert dans le grand au-delà, ce qui pourrait s'avérer utile pour quelqu'un qui lirait 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)

14
Greg Pettit

Une fonction simple qui saute (défile instantanément) au bas de la page. Il utilise la fonction intégrée .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() );
}
4
Rory O'Kane

Si vous ne vous souciez pas de l'animation, vous n'avez pas à obtenir la hauteur de l'élément. Au moins dans tous les navigateurs que j'ai essayés, si vous donnez à scrollTop un nombre supérieur au maximum, il vous suffira de faire défiler l'écran 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 que certains éléments avec une barre de défilement, il suffit de rendre 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));

Donc, je peux le faire quand j’ajoute un tas de choses:

$(myScrollingElement).append(lotsOfHtml).scrollToBottom();
2
Michael Scheper

Celui-ci a fonctionné pour moi:

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

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 agité dans Safari dans le cashtml une balise dans CSS a la propriété overflow: auto;. Il m'a fallu presque une heure pour comprendre.

0
Ilia Rostovtsev