[解決済み] アンカーリンクをリンク先より数ピクセル上に移動させる

質問

この質問をする/検索するのに最適な方法がわかりません。

アンカーリンクをクリックすると、リンク先のページがページの一番上に表示され、そのセクションに移動します。アンカー リンクでページのその部分に移動できるようにしたいのですが、一番上にスペースが欲しいのです。例えば、私はそれが非常にトップにあるリンク先の部分に私を送ることを望んでいない、私はそこに100または約ピクセルのスペースが必要です。

これは意味があるのでしょうか？これは可能ですか？

コードを表示するために編集されました - これは単なるアンカータグです。

<a href="#anchor">Click me!</a>

<p id="anchor">I should be 100px below where I currently am!</p>

どのように解決するのですか？

window.addEventListener("hashchange", function () {
    window.scrollTo(window.scrollX, window.scrollY - 100);
});

これにより、ブラウザがアンカーにジャンプする作業を代わりに行い、その位置をオフセットに使用することができるようになります。

EDIT 1:

erb さんのご指摘の通り、ハッシュが変更されている間、ページ上にいる場合のみ動作します。ページに入るときに #something でページに入ると、上記のコードでは動作しません。それを処理するための別バージョンがこちらです。

// The function actually applying the offset
function offsetAnchor() {
    if(location.hash.length !== 0) {
        window.scrollTo(window.scrollX, window.scrollY - 100);
    }
}

// This will capture hash changes while on the page
window.addEventListener("hashchange", offsetAnchor);

// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(offsetAnchor, 1); // The delay of 1 is arbitrary and may not always work right (although it did in my testing).

注 jQuery を使用するには、単に window.addEventListener を $(window).on に変更しました。ありがとう@Neon。

EDIT 2です。

ご指摘の通り、同じアンカーリンクを2回以上連続してクリックすると上記は失敗します。 hashchange イベントがないためです。

この解決策は@Maveからの提案の非常に小さな修正版であり、単純化のためにjQueryセレクタを使用します。

// The function actually applying the offset
function offsetAnchor() {
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 100);
  }
}

// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function(event) {
  // Click events are captured before hashchanges. Timeout
  // causes offsetAnchor to be called after the page jump.
  window.setTimeout(function() {
    offsetAnchor();
  }, 0);
});

// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);

この例のJSFiddleは ここで