18

私は次の問題を抱えています：

Facebookと同様に、ページの上部に常に表示されるメニューバーがあります（position: fixed;）。ページのハッシュリンクをクリックして（またはURLにハッシュを含む新しいページをロードして）ページの特定の要素にジャンプすると、ブラウザは常にこの要素をページの最上部にスクロールします。つまり、その後、要素はトップメニューバーの後ろにあります。

このスクロール位置に（負の）オフセットを自動的に追加するJavascript（jQueryまたは通常のJavascript）を追加して、リンクがクリックされたとき、またはページが読み込まれたときに、リンクされた要素がトップメニューバーの真下に配置されるようにします。しかし、これを処理するすべてのリンクにイベントリスナーを追加したいだけではありません。また、ブラウザのアドレスバーを使用してURLにハッシュ部分がページに読み込まれる場合（またはURLの最後にハッシュがある別のページにリンクする場合）に機能するソリューションが必要です。

これを手伝ってくれませんか。前もって感謝します！:)

4

11 に答える 11

30

私は実際に、cssのみを使用して、自分に合った解決策を見つけました。

ジャンプリンクが指している要素にmargin-top: -40px;とを追加しました。padding-top: 40px;これは、IE（7-9）、Firefox、Opera、Chrome、Safariのすべての主要なブラウザで機能します。

唯一の問題：この要素が浮動要素の後にある場合、負のマージンは機能しません（正のパディングが表示されることを意味します）。誰かがこれの解決策/回避策を知っているなら、コメントしてください。その後、投稿を更新します。ありがとうございました！

于 2012-07-11T21:11:29.857 に答える
8

私はcssにaを追加するこの方法が:beforeうまくいくようだとわかりました。

h2:before { 
  display: block; 
  content: " "; 
  margin-top: -285px; 
  height: 285px; 
  visibility: hidden; 
}

CSSTricksのWebサイトで詳細を見る

于 2016-06-14T00:19:04.873 に答える
2

例として、すべての主要なブラウザで機能するDのbootDocソリューションを考えてみましょう。

CSS（の代わりにタイトルバーの高さを挿入40px）：

.symbol-target {
    padding-top: 40px;
    margin-top: -40px;
    width: 1px; /* '0' will not work for Opera */
    display: inline-block;
}

HTML：

<h3>
    <span class="symbol-target" id="myTarget">&nbsp;</span>
    <a href="#myTarget">My text</a>
</h3>

実際のページの例：

std.array.uninitializedArrayを使用したドキュメントbootDoc

ノート：

IE6では機能しません。

于 2012-11-04T08:27:45.640 に答える
2

これに関する解決策に追加するために、表示をnoneに設定すると、フロートされた要素間で使用されたときにパディングが表示されるという問題が解決されることがわかりました。

それで：

.symbol-target {
    padding-top: 40px;
    margin-top: -40px;
    width: 1px; /* '0' will not work for Opera */
    display: hidden;
}

また、このスタイルをターゲットコンテンツのすぐ上にある空のdivとして含めました。

于 2014-06-20T16:46:15.790 に答える
1

私にとって最も効果的なのは、これを行うことでした。

  1. 指定されたID（URLに必要なもの）を、必要な要素内の別の要素に割り当てます。
  2. その新しい要素を絶対にし、必要な要素のXピクセル上に移動します。ここで、Xは固定ヘッダーの高さです。
于 2015-02-14T17:15:22.057 に答える
1

他のみんなはCSSの答えを出しましたが、質問はJSに尋ねました

@assmmahmudの答えは、1つの小さな調整で機能します。最初のステートメントでgotoSpecificPositionをoffsetAnchorに変更する必要があります。

これは、スティッキーヘッダーのすべてのIDリンクを調整するのに非常に役立ちました。

/* go to specific position if you load the page directly from address bar */
var navbarHeight = document.getElementById('mynavbar').clientHeight;
function offsetAnchor() {
  if (window.location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - navbarHeight );
  }
}

/* Captures click events on all anchor tag with a hash tag */
$(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);
});

window.setTimeout(offsetAnchor, 0);
于 2021-01-13T22:01:27.637 に答える
1

今日、2021年には、とを使用した単純なCSSソリューションのみが:targetあります。scroll-margin-top

:target {
    scroll-margin-top: 100px;
}

すべての主要なブラウザで動作します

参照：

于 2021-10-12T05:54:38.677 に答える
0

残念ながら（少なくともFirefoxを使用している場合）、ここではパディングもマージンも役に立ちません（メニューバー以外のすべてを含む「メイン」divに配置します）。アンカーまでスクロールすると、常にページの最上部に配置され、固定要素が制限されます。

元のアイデアを採用する必要があると思いますが、委任を使用することで、動的に追加されたリンクを含め、メニューバーのすべてのリンクで機能するハンドラーを1つだけ設定できることを覚えておいてください。

于 2012-07-09T03:40:02.797 に答える
0

純粋なJavaScriptを使用すると、次のことができます。すべてのアンカータグに対するクリックイベントをリッスンし、ページ内の目的の位置までスクロールします（jqueryを使用しています）。

/* go to specific position if you load the page directly from address bar */
var navbarHeight = document.getElementById('mynavbar').clientHeight;
function gotoSpecificPosition() {
  if (window.location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - navbarHeight );
  }
}

/* Captures click events on all anchor tag with a hash tag */
$(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);
});

window.setTimeout(offsetAnchor, 0);

上記のコードはすべてのトリックを処理します。

于 2017-08-09T11:07:00.330 に答える
0 
 h1, h2, h3, h4, h5, h6 {
   scroll-margin-top: 80px;
 }

Reactのドキュメントからこのアイデアを得ました。

于 2021-06-09T11:24:01.170 に答える
-1

メニューバーの後ろの領域を占めるように、ページの上部にパディングを配置してみてください。次のようなもの: padding-top:80px;(80pxの代わりに、メニューバーの高さを入力する必要があります）。

于 2012-07-08T21:28:08.163 に答える