0

该部分的 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 作为锚点，用于 box-sub 的 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>

我已经在 CSS 中将部分 ID 显示为块，但它没有帮助。

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

1 回答 1

0

这很可能是导致问题的填充。尝试删除它，看看它是否会自行纠正。如果是这样，则使用设置为所需宽度的 div 包装器，并将带有填充的内容放在 div 包装器内。

于 2012-10-11T15:55:19.763 回答