페이지 끝의 마지막 컨테이너로 스크롤하는 방법

Question

고정 된 위치에있는 탐색 기능을 제공합니다. 마지막 탐색 항목을 클릭하면 사용할 수있는 스크롤 공간이 없어 콘텐츠를 정렬 할 수 없습니다. 마지막 탐색 항목이 콘텐츠와 정렬되도록 우아한 방법이 있습니까? 내 마음에 온

옵션 :

• 는 공간의 하단에 여분의 공간을 추가 (간단하지만이 좋아 보이지 dosn't)는에 사업부를 켤 수있는 플러그인을 사용
• 을 탐색 자체가 스크롤 할 수 있도록 스크롤 영역 여기

내 기존 코드의 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 
} 

내 코드 :

// 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'); 

이 항상 탐색 정렬을하는 데 필요한 높이를 반환합니다

<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 스크립트에 따르면 나는 다음과 같은 스크립트를 생성 내용물 포함

Fiddle

그러나 화면이 크고 마지막 단락이 짧으면 여분의 공백이 많이 생깁니다. 공백을 피하는 다른 아이디어?

Answer 1

아래 예에서와 같이 jQuery를 사용하여 마지막 요소에 높이를 추가 할 수 있습니다. 또는 신체 자체에 높이를 추가 할 수 있습니다.

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

희망이 있습니다.