滾動到

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

這會在你的。主要div的底部添加額外的空間：

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

或者你可以添加一個最小高度。主要並將其設置爲一定量，以保證有足夠的空間。

Answer 3

我相信你能做到這一點的唯一方法是在底部添加一些內容。

由於頁面沒有顯示，因爲頁面已經結束，所以無法滾動到第五項的頂部。