がHREF =「＃IDは」

Question

を使用しているときにスクロールするパディングトップを追加します。私は、アンカータグを持っている：

<a href="#map_4D85448A3D4C4180A02BD6FC387ABC45" onclick="jumptosection('map_4D85448A3D4C4180A02BD6FC387ABC45');">A Guide</a> 

それはIDが「map_4D85448A3D4C4180A02BD6FC387ABC45」を持っているセクションに移動します。

function jumptosection(id) { 
    var target = document.getElementById(id); 
    if(document.all){ 
     document.documentElement.scrollTop = target.offsetTop; 
    }else{ 
     var top = 0; 
     do { 
      top += target.offsetTop || 0; 
      target = target.offsetParent; 
     } while(target); 

     document.body.scrollTop = top ; 
    } 
    //$('#article').css.paddingTop = '55px'; 
    return false; 

しかし、私はこの機能には何も書かない場合でも、動作は同じです：次のようにju​​mptosection関数です。問題は、指定されたアンカーをクリックすると、セクションの一部を隠す92pxのヘッダーストリップがあることです。ヘッダーをエスケープするためにいくつかのピクセルを追加しながら、指定したセクションにスクロールさせるにはどうすればよいですか？

Answer 1

可能です。私はjavascriptなしでそれをやるので、それはすべてのために働く。 JSの変更は必要ありません。

スクロールする要素の上に空の要素を作成するだけで済みます。 CSSは魔法を遂行する。それはあなたの高さオフセットに隠しボックスを作成します。

HTML：

<span class="anchor" id="map_4D85448A3D4C4180A02BD6FC387ABC45"></span> 
<h1>Element to scroll to</h1> 

CSS：

.anchor { 
    display: block; 
    height: 92px; 
    margin-top: -92px; 
    visibility: hidden; 
} 

はここで働くのデモを参照してください： https://jsfiddle.net/eczxm1rs/1/