157

この質問を尋ねたり検索したりする最良の方法がわかりません:

アンカー リンクをクリックすると、リンク先の領域がページの一番上にあるページのそのセクションに移動します。アンカー リンクでページのその部分に移動できるようにしたいのですが、上部にスペースが必要です。のように、リンク先の部分に移動させたくないので、そこに 100 ピクセル程度のスペースが必要です。

これは理にかなっていますか？これは可能ですか？

コードを表示するように編集 - これは単なるアンカー タグです。

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

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

26 に答える 26

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

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

編集1：

@erb が指摘したように、これは、ハッシュが変更されているときにページにいる場合にのみ機能します。上記のコードでは、既に URL に含まれているページに入ること#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ありがとう@ネオン。

編集2：

何人かが指摘しているようにhashchange、オフセットを強制するイベントがないため、同じアンカー リンクを 2 回以上続けてクリックすると、上記は失敗します。

このソリューションは、@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 はこちら

于 2013-07-08T20:07:21.700 に答える
101

css のみで作業すると、アンカーされた要素にパディングを追加できます (上記のソリューションのように)。不要な空白を避けるために、同じ高さの負のマージンを追加できます。

#anchor {
    padding-top: 50px;
    margin-top: -50px;
}

いずれにせよ、これが最善の解決策であるかどうかはわかりませんが、私にとってはうまくいきます。

于 2014-02-28T12:27:52.857 に答える
70

さらに良い解決策：

<p style="position:relative;">
    <a name="anchor" style="position:absolute; top:-100px;"></a>
    I should be 100px below where I currently am!
</p>

<a>相対的に配置されたオブジェクト内に絶対配置でタグを配置するだけです。

ページに入るとき、またはページ内のハッシュ変更によって機能します。

于 2015-03-26T07:45:02.540 に答える
14

最良の解決策

<span class="anchor" id="section1"></span>
<div class="section"></div>

<span class="anchor" id="section2"></span>
<div class="section"></div>

<span class="anchor" id="section3"></span>
<div class="section"></div>

<style>
.anchor{
  display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;
}
</style>
于 2015-03-19T14:02:02.743 に答える
4

これはうまくいくはずです：

    $(document).ready(function () {
    $('a').on('click', function (e) {
        // e.preventDefault();

        var target = this.hash,
            $target = $(target);

       $('html, body').stop().animate({
        'scrollTop': $target.offset().top-49
    }, 900, 'swing', function () {
    });

        console.log(window.location);

        return false;
    });
});

.top-49 をアンカー リンクに合うものに変更するだけです。

于 2015-08-14T21:23:13.290 に答える
0

これが少し遅れていることは承知していますが、Bootstrap の Scrollspy を使用している場合、コードに追加する必要がある非常に重要なものを見つけました。( http://getbootstrap.com/javascript/#scrollspy )

これは私を何時間も夢中にさせていました。

スクロール スパイのオフセットは、window.scrollY と一致する必要があります。そうしないと、次のリスクが発生します。

  1. スクロール時に奇妙なちらつき効果が発生する
  2. アンカーをクリックすると、そのセクションに着陸することがわかりますが、スクロールスパイは、あなたがその上のセクションであると想定します.

 var body = $('body');
    body.scrollspy({
        'target': '#nav',
        'offset': 100 //this must match the window.scrollY below or you'll have a bad time mmkay
});

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

于 2015-10-22T22:50:17.273 に答える
-2 
<a href="#anchor">Click me!</a>

<div style="margin-top: -100px; padding-top: 100px;" id="anchor"></div>
<p>I should be 100px below where I currently am!</p>
于 2015-06-10T11:11:07.333 に答える