ID錨稍微過頭

Question

HTML的部分滾動：

<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> 

我只使用了ID作爲錨，用於箱子CSS：

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

的錨滾動在停止之前太遠了。我希望它停止上述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> 

的Javascript如下：

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

我已經顯示部分ID作爲阻止在CSS中，但它沒有幫助。

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

Answer 1

這很可能是導致問題的填充。嘗試刪除它，看看它是否自行糾正。如果是這樣，那麼使用div包裝器設置爲您想要的寬度，並將內容與填充內容放在div包裝器中。