Scrolling донизу элементы страницы

Question

я подготовил довольно самостоятельное объяснение jsfiddle: http://jsfiddle.net/nt7xzxur/ со следующим кодом прокрутки внутри:

function smoothScroll(hash) { 
$('html, body').animate({ 
    scrollTop: $(hash).offset().top 
}, 750); 

При нажатии на одну из ссылок, доступных, окно браузера является прокручивается до точки, где расположен соответствующий элемент на правой стороне. Есть одна вещь, которую я бы хотел достичь:

Очевидно, что последние два элемента не будут прокручиваться вверх, потому что для прокрутки недостаточно содержимого. Я бы хотел, чтобы ВСЕ элементы были прокручиваемы вверху, и до сих пор я не нашел хороший способ сделать это. Я мог бы добавить несколько пустых строк ниже последнего элемента, но он добавляет длину в правую полосу прокрутки и не очень элегантен.

Есть ли другой способ сделать это через css, js или иначе?

Answer 1

Вы можете динамически рассчитать дополнительное пространство и добавить его в конец страницы. Я создал один небольшой код, который вы можете посмотреть на него, и использовать его в соответствии с вашими потребностями. http://jsbin.com/mubugusido/6/edit?html,js

Answer 2

Это добавит дополнительное пространство в нижней части .main DIV:

wH = $(window).height(); 
$extraH = $('<div></div>').height(wH); 
$('.main').append($extraH); 

Или вы можете добавить мин-высоту .main и установить его на некоторую сумму, чтобы гарантировать, что есть достаточно места.

Answer 3

Я считаю, что единственный способ добиться этого - фактически добавить некоторый контент внизу.

Вы не можете получить страницу, чтобы прокручивать ее до верхней части пятого элемента, потому что на экране ничего нет, потому что страница закончилась.