jQuery Desplácese hasta la parte inferior de la página / iframe

¿Cómo uso jquery para desplazarme hasta la parte inferior de un iframe o página?

    Si desea un rollo de animación lento y agradable, para cualquier anclaje con href="#bottom" esto lo desplazará al final:

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

    Siéntase libre de cambiar el selector.

    Editar: Mire la respuesta a continuación por Tom Bates para una respuesta potencialmente mejor.

    scrollTop () devuelve el número de píxeles que están ocultos de la vista del área desplazable, por lo que se le da:

     $(document).height() 

    en realidad se sobrepasará la parte inferior de la página. Para que el desplazamiento se “detenga” en la parte inferior de la página, es necesario restar la altura actual de la ventana del navegador. Esto permitirá el uso de relajación si es necesario, por lo que se convierte en:

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

    Por ejemplo:

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

    Después de que este hilo no funcionó para mí para mi necesidad específica (desplazándome dentro de un elemento en particular, en mi caso un área de texto) descubrí esto en el gran más allá, lo que podría ser útil para alguien más leyendo esta discusión:

    Alternativa en planetcloud

    Como ya tenía una versión en caché de mi objeto jQuery (el myPanel en el código a continuación es el objeto jQuery), el código que agregué a mi controlador de eventos fue simplemente esto:

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

    (gracias Ben)

    Una función simple que salta (se desplaza al instante) hasta el final de toda la página. Utiliza el built-in .scrollTop() . No he intentado adaptar esto para trabajar con elementos de página individuales.

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

    Este trabajó para mí:

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

    Si no te importa la animación, entonces no tienes que obtener la altura del elemento. Al menos en todos los navegadores que he probado, si le das a scrollTop un número que es más grande que el máximo, simplemente se desplazará al final. Así que dale el mayor número posible:

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

    Si desea desplazar la página, en lugar de algún elemento con una barra de desplazamiento, simplemente haga que myScrollingElement igual a ‘cuerpo, html’.

    Como tengo que hacer esto en varios lugares, he escrito una función jQuery rápida y sucia para que sea más conveniente, así:

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

    Entonces puedo hacer esto cuando agrego cosas de un buncho:

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

    Los guiones mencionados en respuestas anteriores, como:

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

    o

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

    no funcionará en Chrome y estará nervioso en Safari en caso de que la etiqueta html en CSS tenga overflow: auto; conjunto de propiedades. Me llevó casi una hora descubrirlo.