如何滾動到頁面末尾的最後一個容器

我有一個與其內容對齊的固定位置導航。點擊最後一個導航項時，內容無法對齊，因爲沒有可用的滾動空間了。有沒有一種優雅的方式，使最後一個導航項與內容對齊？如何滾動到頁面末尾的最後一個容器

是來到我的腦海中的選項：

在空間的底部添加額外的空間（簡單，但這不到風度好看）
使用插件，變成一個div成滾動區域，這樣的導航本身可以滾動（不知道這是做-能。此外，它似乎是一個相當混亂的方式）

這裏是我現有的代碼fiddle

個

CSS：

.section { 
    background-color: #cccccc; 
    margin:20px; 
} 
#nav { 
    position:fixed; 
    top:0px; 
    right:20px; 
    float: right; 
    margin:20px; 
} 
#section-1 { 
    height: 300px 
} 
#section-2 { 
    height: 200px 
} 
#section-3 { 
    height: 500px 
} 
#section-4 { 
    height: 300px 
} 
#section-5 { 
    height: 200px 
} 
#section-6 { 
    height: 200px 
}

我的代碼：

<ul id="nav"> 
    <li class="current"><a href="#section-1">Section 1</a> 

    </li> 
    <li><a href="#section-2">Section 2</a> 

    </li> 
    <li><a href="#section-3">Section 3</a> 

    </li> 
    <li><a href="#section-4">Section 4</a> 

    </li> 
    <li><a href="#section-5">Section 5</a> 

    </li> 
    <li><a href="#section-6">Section 6</a> 

    </li> 
</ul> 
<div class="section" id="section-1">section1</div> 
<div class="section" id="section-2">section2</div> 
<div class="section" id="section-3">section3</div> 
<div class="section" id="section-4">section4</div> 
<div class="section" id="section-5">section5</div> 
<div class="section" id="section-6">section6</div>

根據Albertos劇本我創建了下面的腳本：

// height of the last section 
var last_section_height = parseInt($("#section-6").css('height'), 10); 

// height of the viewport - hight of the last section + extra height of margins 
var height = $(window).height() - last_section_height + 180; 
    $('#section-6').css('height', height+'px');

這將始終返回所需的高度，使導航對齊內容

Fiddle

但是，如果屏幕很大，最後一節短，會有很多額外的空白。任何其他的想法，以避免空白？

來源

2013-02-01 user915308

你需要使文檔的高度更長 – ashley

你可以使用一塊jQuery，就像我下面的例子，爲最後一個元素添加高度。或者，您可以將高度添加到身體本身。

$(document).ready(function() { 
    var height = $(document).height()+300; 
    $('#section-6').css('height', height+'px'); 
});

希望這會有所幫助！

來源

2013-02-01 21:02:54

謝謝阿爾貝託！我把你的腳本做了一些小的改動。所以最後一節的高度與nav完全吻合 – user915308

謝謝，完成！ – user915308

如何滾動到頁面末尾的最後一個容器

回答

相關問題