2012-10-11 89 views
0

HTML的部分滚动:ID锚稍微过头

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

回答

0

这很可能是导致问题的填充。尝试删除它,看看它是否自行纠正。如果是这样,那么使用div包装器设置为您想要的宽度,并将内容与填充内容放在div包装器中。