ハイパーリンクとフラグメントID垂直オフセット問題

Question

スクロール中に画面の後に続く静的に配置されたメニューストリップがページ上部にあります。

フラグメントリンクを使用する場合は、スクロール位置をメニューストリップの高さでオフセットする必要があります。これはどのように達成できますか？

<a href="#fragment">Go to fragment</a> 
<div id="fragment">...</div> 

html { padding-top: 38px; } /* Offset page to allow for menu strip */ 
.menu-strip { position: fixed; top: 0; right: 0; left: 0; height: 38px; } 

これを達成するための簡単なCSS変更はありますか？

フラグメントが指定されている場合、スクロールを200ピクセルずつオフセットする一般的な方法はありますか？

Answer 1

あなたがしたいことは、独自のハッシュリンクを処理することです。ハッシュリンクを行うすべてのaをグループ化することをお勧めします。たとえば、

$(".ahashlink").click(function() { 

    var location = $(this).attr("href"); 
    var offset = $(location).offset().top; 
    $("body").scrollTop(offset+38); 
    return false; 
}); 

これは、正しい位置にPLUS 38ピクセル（トップバーの高さ）までスクロールします。ただし、ブラウザでURLを変更しても、正しいハッシュを含むことはできません。これは、いったんwindow.location.hash = "#something"になるとウィンドウが自動的にそのハッシュにスクロールするためです。だから心に留めておいてください。

Answer 2

この古い記事はHTML+CSS only solutionです。

基本的な考え方は、それらを相殺するために、各リンク可能な要素の前にいくつかの隠しコンテンツを挿入する:before css selectorを使用することです：

<linked_elements>:before { 
    display: block; 
    content:" "; 
    margin-top: -<offset>; 
    height: <offset>; 
    visibility: hidden; 
} 

は、ここで彼らのdemoのjsfiddleです。

また、これは（私が思う）html { padding-top: 38px; }