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：

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

Answer 1

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

ID锚点滚动得太远了

1 个答案: