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

scrollto jquery

Question

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

Answer 1

Después de que este hilo no funcionó para mi necesidad específica (desplazarme 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 que lea esta discusión:

Alternativa en planetcloud

Dado que 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)

Answer 2

Este me funcionó:

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

Answer 3

Los guiones mencionados en respuestas anteriores, como:

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

o

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

no funcionará en Chrome y será inestable en Safari en caso de que la etiqueta html en CSS haya overflow: auto; conjunto de bienes. Me tomó casi una hora darme cuenta.

Answer 4

Por ejemplo:

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

Answer 5

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 mayor que el máximo, se desplazará hacia la parte inferior. 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 ''body, html''.

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

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

Así que puedo hacer esto cuando agrego un montón de cosas:

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

Answer 6

Una función simple que salta (se desplaza instantáneamente) a la parte inferior de toda la página. Utiliza el .scrollTop() . No he intentado adaptar esto para trabajar con elementos de página individuales.

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

Answer 7

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

$(document).height()

en realidad rebasará la parte inferior de la página. Para que el desplazamiento se "detenga" en la parte inferior de la página, la altura actual de la ventana del navegador necesita restarse. 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"
);

Answer 8

Si desea un desplazamiento lento agradable de la animación, para cualquier ancla con href="#bottom" esto lo desplazará a la parte inferior:

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

Siéntase libre de cambiar el selector.

Edición: Por favor, mire la respuesta a continuación por Tom Bates para una respuesta potencialmente mejor.