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 に答える