jQuery Desplazarse 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 buen desplazamiento lento de animación, cualquier ancla con href="#bottom"esto lo desplazará hasta la parte inferior:

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

Siéntase libre de cambiar el selector.

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

$(document).height()

en realidad sobrepasará la parte inferior de la página. Para que el desplazamiento realmente 'pare' en la parte inferior de la página, la altura actual de la ventana del navegador necesita restar. Esto permitirá el uso de flexibilizació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 (desplazarse dentro de un elemento en particular, en mi caso, un área de texto) descubrí esto en el más allá, lo que podría ser útil para alguien más que lea esta discusión:

Alternativa en planetcloud

Como ya tenía una versión en caché de mi objeto jQuery ( myPanelen el código a continuación está 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 instantáneamente) al final de toda la página. Utiliza el incorporado .scrollTop(). No he intentado adaptar esto para trabajar con elementos de página individuales.

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

Este funcionó 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 scrollTopun número que es más grande que el máximo, simplemente se desplazará hacia abajo. Así que dale el mayor número posible:

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

Si desea desplazarse por la página, en lugar de algún elemento con una barra de desplazamiento, simplemente haga que sea myScrollingElementigual a 'cuerpo, html'.

Como necesito 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 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 html etiqueta en CSS tenga overflow: auto;establecida la propiedad. Me llevó casi una hora darme cuenta.

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

Uso este código para desplazar el chat cuando llegan nuevos mensajes.