Как сделать нижнюю часть браузера прокручивать до нижней части div

Question

Я пытаюсь создать этот эффект, который, когда вы нажимаете кнопку, на странице будет прокручиваться до div и выравнивать нижнюю часть браузера с нижней частью div. Я возился с scrollTop() и offset(), но не получил работу. Есть идеи?

Answer 1

$("#button").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#elementtoScrollToID").offset().top 
    }, 2000); 
}); 

взяты из http://www.abeautifulsite.net/blog/2010/01/smoothly-scroll-to-an-element-without-a-jquery-plugin/

Answer 2

Я хотел бы использовать .scrollHeight:

$("#div1").animate({ scrollTop: $("#div1").scrollHeight}, 1000); 

EDITED

Это потому, что вы должны рассчитать высоту и т.д.

var scrollBottom = $(window).scrollTop() + $(window).height(); 

Answer 3

Вы можете использовать следующий код

var wHeight = $(window).height(); // Height of view port 
var eOffset = $('#elementID').offset().top; // Y-offset of element 
var eHeight = $('#elementID').height(); // Height of element 

$(window).scrollTop(eOffset - wHeight + eHeight); // See below for explanation 

Пояснение

1. Вы устанавливаете .scrollTop() как у-смещение элемента, который помещает элемент в верхней части окна
2. Затем вы вычитаете высоту порта представления, который выставляет элемент на экран (чуть ниже)
3. Затем вы dd высота элемента для выравнивания нижней части порта представления в нижней части браузера