如何滚动到页面末尾的最后一个容器

Question

我有一个与其内容一致的固定位置导航。单击最后一个导航项时，内容无法对齐，因为没有更多可用的滚动空间。 有没有一种优雅的方式让最后一个导航项与内容对齐？

我想到的选项：

• 在空间底部添加额外的空间（简单，但这看起来不太好）
• 使用插件将 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

但是，如果屏幕很大并且最后一部分很短，则会有很多额外的空白。还有其他避免空白的想法吗？

Answer 1

您可以使用一个 jQuery，如下面的示例，为最后一个元素添加高度。或者，您可以将高度添加到主体本身。

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

希望这会有所帮助！