css - CSS-固定された位置の要素の下でコンテンツをスクロールしますか？

Question

HTML：

<div id="container">
    <ul>
        <li><a href="#first">first</a></li>
        <li><a href="#second">second</a></li>
        <li><a href="#third">third</a></li>
    </ul>
    <div id="somecontainer">
        <div id="first">
        </div>
        <div id="second">
        </div>
        <div id="third">
        </div>
    </div>
</div>

デモ：http： //jsfiddle.net/JRn​​Dz /

問題： 「second」という名前のリンクをクリックすると、ページはIDが「second」のdivにジャンプするはずです。ただし、div全体は表示されませんが、一部（150px-50px = 100px）が表示されます。divの上部が切り取られます。

質問： 「2番目の」リンクをクリックした後、div全体を表示するにはどうすればよいですか？

私が試したこと： 相対的な位置と上部の追加：コンテナに50px：

#container {
  position: relative;
  top: 50px;
}

Answer 1

@ ipsnow72 によって書かれた解決策はより明確です。

必要に応じて、jquery のプラグイン ScrollTo を使用し、offset パラメーターを使用できます。 http://demos.flesler.com/jquery/scrollTo/

$(...).scrollTo( '#yourelement', {offset:-50} );

Answer 2

このコードの用途によって異なりますが、追加すると

#someconteiner div{
    padding-top:50px;
    margin-bottom:-50px;
    position:relative;
    display:block;
}

z-indexes で少し遊んでみてください: http://jsfiddle.net/JRn​​Dz /2/

Answer 3

これを試すことができます：

<div id="container">
<ul>
    <li><a href="#first">first</a></li>
    <li><a href="#secondJump">second</a></li>
    <li><a href="#third">third</a></li>
</ul>
<div id="someconteiner">
    <div id="first">
    </div>
    <a name="secondJump"></a>
    <div id="second">
    </div>
    <div id="third">
    </div>
</div>
</div>

ジャンプ先の div のすぐ上にアンカーとしてジャンプ先の場所を配置します。

明らかに、1 番目と 3 番目に対して同じことを行います。

編集: あなたのulから固定位置を単に削除してみてください

Answer 4

これはどう：

<div id="container">
<ul>
    <li><a href="#first">first</a></li>
    <li><a href="#secondAnchor">second</a></li>
    <li><a href="#third">third</a></li>
</ul>
<div id="someconteiner">
    <div id="first">
    </div>
    <a name="secondAnchor" style="padding-top: 50px; margin-top: -50px;"></a>
    <div id="second">
    </div>
    <div id="third">
    </div>
</div>
</div>

参照：固定位置のナビゲーションバーがアンカーを覆い隠す