ID 앵커는 섹션에 대해 약간 너무 멀리

Question

HTML 스크롤됩니다

.box-sub { 
    width: 90%; 
    margin: 0 auto; 
    padding-right: 40px; 
    padding-left: 40px; 
    padding-bottom: 40px; 
    padding-top: 50px; 
} 

앵커 스크롤된다

<br style="clear: both;" /> 

<hr /> 

<section id="work" class="box-sub"> 
    <h1 class="work">WORK</h1>   
    <div class="float-full">  
     <a href="fold.php"><img src="img/fold-tn2.png" class="thumbnail" /></a> 
     <a href="ones-up.php"><img src="img/ou-tn2.png" class="thumbnail" /></a> 
     <img src="img/temp.png" class="thumbnail" /> 
     <img src="img/temp.png" class="thumbnail" /> 
     <img src="img/temp.png" class="thumbnail" /> 
     <img src="img/temp.png" class="thumbnail" /> 
    </div> 
</section> 

는 난 단지, 앵커로 상자 서브에 대한 CSS를 ID를 사용하고 있습니다 멈추기 훨씬 전에. 나는 그것이 h1 일 이상 중지하려면,하지만 그것이 #work에 연결 비록 그 위로는 스크롤, 아래 참조 :

<ul> 
    <li><a href="#top"></a></li> 
    <li><a class="scroll" href="#work"></a></li> 
    <li><a class="scroll" href="#info"></a></li> 
    <li><a class="scroll" href="#contact"></a></li> 
</ul> 

자바 스크립트 아래 : 나는 섹션 아이디로 표시 한

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
     $(".scroll").click(function(event){  
      event.preventDefault(); 
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); 
    }); 
    }); 
</script> 

CSS에서 차단하지만 도움이되지 않습니다.

#work { display: block; } 
#info { display: block; } 
#contact { display: block; } 

Answer 1

문제가되는 부분은 대부분 패딩입니다. 그것을 스스로 제거하는지보십시오. 그렇다면 원하는 너비로 설정된 div 래퍼를 사용하고 패딩이있는 내용을 div 래퍼에 배치합니다.