web-dev-qa-db-ja.com

HTML：ページ中央の中央にあるアンカーへのリンクを作成する

HTMLページにアンカーへのリンクがあります。リンクをクリックすると、ページがアンカーまでスクロールされ、アンカーがページの表示部分の最上部に配置されます。アンカーがページの中央にくるようにページをスクロールさせるにはどうすればよいですか？

htmlanchorcenter
22
olamundo

純粋なhtml\cssでこれを行う簡単な方法はありません。 jsを使用しても、要素の上部の位置を取得し、ページの上部の位置をその要素の位置からページの高さの半分を引いた値に設定することで可能です。

7
olamundo

私は解決策を見つけました 固定ヘッダー付きのアンカーリンク フィリップによって投稿されました、彼はウェブデザイナーです。フィリップは、アンカー位置として新しいEMPTYスパンを追加しました。

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

次に、次のcssコードを入力します

.anchor{
  display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;
}

ありがとう、フィリップ！

13
charles.cc.hsu

html：

<a id="anchor">NEWS</a>

css：

#anchor{
position: relative;
padding-top: 100px; //(whatever distance from the top of the page you want)
}

私のためにうまくいった

9
jakub

<span class="anchor" id="X">を配置し、anchorクラスを次のようにスタイル設定します。

.anchor {
  position: absolute;
  transform: translateY(-50vh);
}

-50vh を使用すると、アンカーは画面の中央でスクロールします。

6
Gianluca Pietrobon

空白なしにしたい場合は、次のようにします。

<h2 id="jump_tag" style="padding-top: 500pt; margin-top: -500pt;"></h2>

ただし、JavaScriptから高さを調整する必要があります

3
Sly_TheKing

ページのどの部分を実際に上部に配置するかを決定し、代わりにアンカーをそこに配置します。ブラウザがアンカーを解釈する方法を変更することはできません-少なくともユーザーを混乱させることなく。

2
Tomas Aschan

「ページの中央」は常にユーザーの画面とウィンドウのサイズに関連しているため、これを実現するにはJavascriptを使用する必要があります。純粋なHTML/CSSでは垂直画面を取得する方法がないためです。幅。

1
Triptych

charles.cc.hsuの回答 から拡張して、ビューポートの高さを基準にしたvh CSSユニットを使用して、任意の高さの要素に対してこれを行うことができます。

HTML：

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

CSS：

.anchor{
    display: block;
    height: 50vh; /* 50% viewport height */
    margin-top: -50vh;
    visibility: hidden;
}

vhはIE9以降でサポートされているため、かなり安全に使用できます。

1
Jake Tunaley

ターゲットアンカータグのページの高さの半分に等しい負のマージン（または他の配置方法）を配置してみます。

0
edeverett

Firefoxは、名前付きアンカーでのpadding-topプロパティの設定をサポートしています。そこから、ブラウザのサイズを含むjavascriptを介してCookieを設定し、それに応じてサーバー側でパディングトップを調整できます。エンドユーザーには、純粋なhtml/cssのように見えますが、noamは、ブラウザーのサイズを取得するために少しのJSが必要であるという点で正しいです。これは、少しの強制なしではこの情報を提供しないためです。

0
user186369