32

サイトの上部にある高さ約20pxの静的バーを使用しています。アンカーリンクをクリックすると（知らない人のために、ウィキペディアのナビゲーションはそのように機能します。タイトルをクリックすると、ブラウザがそのリンクに移動します）、テキストの一部がそのトップバーの後ろに表示されなくなります。

これを防ぐ方法はありますか？iFrameを使用できる立場にありません。私が考えることができるのは、毎回少し後ろにスクロールさせることだけですが、別の方法はありますか？本体などを操作するためのCSS設定はありますか？

4

7 に答える 7

50

JavaScriptなしでCSSを使用できます。

アンカーにクラスを与えます。

<a class="anchor"></a>

次に、アンカーをブロック要素にして比較的配置することにより、アンカーを実際にページに表示される場所よりも上または下にオフセットして配置できます。-250pxはアンカーを250px上に配置します

a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}

Janまでに、固定ヘッダーを調整するためにhtmlアンカーをオフセットするを参照してください

于 2013-12-03T17:57:20.957 に答える
18

これが最新の1行の純粋なCSSソリューションです。

scroll-margin-top: 20px;

それはそれがどのように聞こえるかを正確に実行します：マージンがあるかのように動作しますが、スクロールのコンテキストでのみ機能します。つまりscroll-margin-top: 20px;、要素上でその要素のアンカータグをクリックすると、ページが要素の20px上までスクロールされます。

互換性（caniuseを参照）

IEはサポートされていません。また、Safariバージョン11〜14は、非標準の名前を使用しますscroll-snap-margin-top（ただし、それ以外の場合は期待どおりに機能します）。Safari14.1以降は標準名で動作します。

完全な例：

nav{
  position: fixed;
  top:0;
  left:0;
  background: black;
  color: white;
  width: 100%;
}

#after-nav{
  margin-top: 25px;
}

#section-1{
  width: 100%;
  background: green;
  height: 500px;
  scroll-margin-top: 20px;
}

#section-2{
  width: 100%;
  background: blue;
  height: 500px;
  scroll-margin-top: 20px;
}

ul{
margin-top: 0;
}
<nav>
Nav bar: 20px (as in OP)
</nav>
<div id="after-nav">
Table of contents:
<ul>
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
</ul>


<div id="section-1">Section 1</div>
<div id="section-2">Section 2</div>
</div>

于 2021-02-22T00:42:56.533 に答える
9

CSSでこれを修正するには、ジャンプ先の要素にパディングを追加します。

例

または、境界線を追加することもできます。

div{ 
  height: 650px; 
  background:#ccc; 
  /*the magic happens here*/
  border-top:42px solid #fff;
}
ul{
  top: 0; 
  width: 100%; 
  height:20px; 
  position: fixed; 
  background: deeppink; 
  margin:0;
  padding:10px; 
}
li{
  float:left;
  list-style:none;
  padding-left:10px;
}
div:first-of-type{ 
  margin-top:0; 
}
<!-- content to be placed inside <body>…&lt;/body> -->
<ul>
  <li><a href="#s1">link 1</a>
  <li><a href="#s2">link 2</a>
  <li><a href="#s3">link 3</a>
  <li><a href="#s4">link 4</a>
</ul>
<div id="s1" class="first">1</div>
<div id="s2">2</div>
<div id="s3">3</div>
<div id="s4">4</div>

ただし、これが常に適用できるとは限りません。

javascriptソリューションの場合、次のように調整された量のピクセルをスクロールするアンカー要素にアタッチされたクリックイベントを使用できます。

document.querySelector("a").addEventListener("click",function(e){
    // dynamically determining the height of your navbar
    let navbar = document.querySelector("nav");
    let navbarheight = parseInt(window.getComputedStyle(navbar).height,10);
    // show 5 pixels of previous section just for illustration purposes 
    let scrollHeight = document.querySelector(e.target.hash).offsetTop - navbarheight - 5;
    /* scrolling to the element taking the height of the static bar into account*/
    window.scroll(0,scrollHeight);
    /*properly updating the window location*/
    window.location.hash = e.target.hash;
    /* do not execute default action*/
    e.preventDefault();
});
nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:40px;
  text-align:center;
  background:#bada55;
  margin:0;
}
a{
  display:block;
  padding-top:40px;
}
#section1{
  height:800px;
  background:repeating-linear-gradient(45deg,#606dbc55,#606dbc55 10px,#46529855 10px,#46529855 20px);
}
#section2{
  height:800px;
  background:repeating-linear-gradient(-45deg,#22222255,#22222255 10px,#66666655 10px,#66666655 20px);
}
<nav>static header</nav>
<a href="#section2">jump to section 2</a> 
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>

于 2012-07-16T09:05:54.643 に答える
7

CSSのみ：少し汚いですが、ブロック要素にリンクしている場合は:target {padding-top: 20px;}機能します（質問にdivと書かれているので、リンクしていると思います）。ただし、後で手動でスクロールすると、見栄えが悪くなる場合があります。例http://dabblet.com/gist/3121729

それでも、これを修正するためにJavaScriptを少し使用する方が良いと思います。

于 2012-07-16T09:16:32.853 に答える
5

私も同じ問題を抱えていました。これがjQueryソリューションです

$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();
    var target = this.hash;
    var $trget = $(target);
    // Example: your header is 70px tall.
    var newTop = $trget.offset().top - 70; 
    $('html, body').animate ({
        scrollTop: newTop
    }, 500, 'swing', function () {
        window.location.hash = target;
    }); 
});
于 2018-06-05T01:22:24.480 に答える
0

で試してみてくださいwindow.scrollBy(xnum,ynum);

xnum：x軸に沿ってスクロールするピクセル数（水平）ynum：y軸に沿ってスクロールするピクセル数（垂直）

例：http ：//www.w3schools.com/js/tryit.asp？filename = try_dom_window_scrollby

于 2012-07-16T09:13:46.073 に答える
0

上記の他のすべての回答を検索した後、スクロールアンカーの問題を修正するために私が働いたのは次のとおりです。

コード：

#idname {
    scroll-margin-top: 20px;
}

この答えを提案してくれた上記の人々に感謝します。マージンのピクセル数は明らかに変更できます。20pxからに変更しました40pxが、チャームのように機能します。

于 2021-10-20T22:30:06.510 に答える