3

ヘッダーが固定されたページがあり、要素が表示されるようhttp://example.com#fooに要素までスクロールしてid=fooヘッダーの高さを差し引くようなURLが必要です。

私は次のことを試しましたが、少なくともChromeでは、デフォルトのドキュメントフラグメントのスクロールが発生する前にこのコードが実行されるため、スクロール位置が上書きされます:

$(function() {
  var offset;
  if (window.location.hash !== "") {
     offset = $(window.location.hash).offset().top;
     return $("body").scrollTop(offset - headerHeight);
  }
});

ここに問題のjsfiddleがありますhttp://jsfiddle.net/rk8y7/1/

4

1 に答える 1

0

idDOM 要素の を現在の id + に変更_sectionし、イベントをリッスンしhashchangeてページのスクロール位置を設定することで、これを機能させることができました。hashchangeまた、最初のページ読み込みで動作させるために、ページ読み込みでトリガーする必要がありました。

$(function() {
  $(window).on('hashchange', function() {
    var elemId, headerHeight, offset;
    elemId = window.location.hash + "_section";
    if (window.location.hash !== "" && $(elemId).length) {
      headerHeight = $('header').height();
      offset = $(elemId).offset().top;
      return $("html, body").scrollTop(offset - headerHeight);
    }
  });
  $(window).trigger('hashchange');
});

ここに私のフィドルがありますhttp://jsfiddle.net/sguha095/rk8y7/4/

于 2013-06-13T21:54:41.573 に答える