2

アンカーリンクをクリックしたときの画面位置を変更することはできますか? デフォルトでは、アンカー リンクをクリックすると画面が移動し、アンカーが画面の最上部に表示されます。ずらしたいのですが、画面の一番上までずらしたくありません。上から50pxくらいのスペースが必要です。

例：

<a href="#section1">section 1</a>
<a href="#section2">section 2</a>

....
....

<div id="text">
    <div id="section1">text text text</div>
    <div id="section2">text text text</div>
</div>

ありがとう。

4

5 に答える 5

4

JavaScript は必要ありません。これはあなたが望むことをするでしょう。

このソリューションを使用すると、クラスの CSS ルールで指定されたアンカーからオフセットされた位置に画面をスクロールさせたい場所にアンカーを配置できますadjusted-anchor。

<style>

  .anchor-container {
     position:relative;
  }

  .adjusted-anchor {
     position:absolute;
     top: -150px;
  }

</style>

<a href="#anchor">CONTINUED BELOW</a>

...


<div class="anchor-container"><div name="anchor" class="adjusted-anchor"></div></div>
<div>...continued from above</div>

オフセットは固定されているため、画面のサイズが変更されたときにコンテンツがリフローする場合は、パーセンテージまたは JavaScript を使用してブラウザーのサイズ変更に対応する必要があります。

于 2013-03-21T17:47:32.413 に答える
2

余分な要素を追加しない純粋な CSS オプション:

a.shifted-anchor {
  display: block;
  position: relative;
  top: -100px;
}

<a name="something" class="shifted-anchor"></a>
于 2016-12-17T04:38:07.127 に答える
0

純粋な html でそれを行う方法はありません。異なるブラウザーでは異なる結果が得られます。

javascript の window.scrollTo() を調べてください

于 2013-02-27T21:36:24.600 に答える