스크롤 막대 위치

Question

클릭하여

스크롤 막대를 특정 div에 위치 시키려고합니다. 나는이 코드를 사용합니다

<a href="#sponsor">Go to Sponsor</a> 
... 
<div id="sponsor">Sponsor</div> 

문제는 내 헤더 (높이 50 픽셀로) 고정되어 있다는 것입니다 및 사업부 번호 스폰서 자체를 중복.

방법을 해결하기 위해 여기 http://jsfiddle.net/xqZ9y/

보기?

감사합니다. 당신은 추가 요소를 추가하여 문제를 우회 할 수

Answer 1

는 문제가 표준 앵커가의 scrollTop을 설정하여 대상에 당신을 데려 갈 것입니다 #sponsor

<span id="sponsor"></span> 

#sponsor { 
    width: 0; 
    height: 0; 
    position: relative: 
    top: 50px; 
} 

Answer 2

제대로 위치 문서가 대상의 오프셋 상단이되도록합니다. 귀하의 경우 이것은 품목이 귀하의 헤더 뒤에 위치 함을 의미합니다. 이 문제를 해결할 수있는 한 가지 방법은 항목을 다시 배치 할 때 머리글 높이를 보완하기 위해 앵커 클릭 이벤트를 재정의하는 것입니다. 여기

어떤이 작업을 수행 할 것 jQuery를 ...

$(function(){ 
    $("a[href^='#']").on("click.scrollFix", function(e) { 
     // cancel the click of the a href from taking you to the 
     // anchor by normal means 
     e.preventDefault();   

     // instead find the element and scroll to the elements position - the height of the  header 
     var targetSelector = $(this).attr("href"), 
      targetTop = $(targetSelector).offset().top, 
      headerHeight = $("#header").outerHeight(true); 

     $(document).scrollTop(targetTop - headerHeight); 
    }); 
}); 

하고 여기에 고정 된 헤더와 일부 정크 내용 :

http://jsfiddle.net/QjheK/