2014-04-23 2 views
0

페이지에 네 개의 탭을 사용하고 있습니다. 각 탭 섹션의 내용은 내가 tabTitle을 클릭하면이 같은 페이지의 내용 부분을 적절한 간다,앵커 링크는 페이지의 위치에 있습니다.

Header - style(fixed & height) 
tabs(4) - tabTitle 

tabContant1 
tabContant2 
tabContant3 
tabContant4 

ID로 정의 된 각 탭과 같은 페이지

의 맨 아래에 있습니다. 내가 tabTitle2을 클릭하면 문제가

, 예를 들어

는 tab2Conetent 페이지 헤더에 페이지 톱에 온다. 동시에, 난 페이지 머리글을 고정으로 tab2Content 헤더 뒤에 일부를 숨기고있다. 어떻게 내용에
은 고정 된 헤더 아래에 오는

답변

0
당신은 페이지의 이동 위치를 정확히 정의하기 위해 jQuery를 사용할 수

, 여기 당신을 위해 그 일하게하는 방법의 예 :

jQuery scroll to element

은 당신은 단지 HTML을 사용하려는 경우 또는, 이와 같은 인 - 문서 앵커를 배치 할 수 있습니다 :

<div> 
    <a name="MyStopOne"></a> 
</div> 
<div style="margin-top:20px;"> 
    My Content Part One 
</div> 

를 그리고 단순히 같은 HTML을 사용하고 있습니다 :

패드에 당신이 점프하고 실제 내용이고,의 일부를 숨기는 정적 헤더의 문제를 극복 곳 사이의 간격을 수있는 방법을 제공합니다
<a href="#MyStopOne">Jump to Stop One</a> 

공지 사항 스타일 = "여백 탑", 당신의 점프시 내용.

+0

페이지 머리글 높이가 300px이므로 사용 여백을 사용하지 마십시오. 다른 옵션이 있습니까? –

+0

궁극의 컨트롤을 제공하는 스크립트를 작성하십시오. 따라서 제 대답에서 제가 제시 한 첫 번째 옵션이 있습니다. – DoctorLouie

+0

jQuery scrollTo 함수를 사용하여 문서 내 링크가 작동하는 방식에서 최대한의 제어 및 유동성을 얻는 방법을 살펴보십시오. http://vps-net.com/w3c.htm?st=TR/ html 디자인 원칙 / – DoctorLouie

관련 문제