HTML：リンクをページの中央に配置されたアンカーに導く

StackOverflow https://stackoverflow.com/questions/1418838

  •  07-07-2019
  •  | 
  •  

質問

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

役に立ちましたか？

解決 3

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

他のヒント

解決策を見つけました固定ヘッダーのアンカーリンクフィリップが投稿した、彼はウェブデザイナーです。フィリップは、アンカー位置として新しい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;
}

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

html：

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

css：

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

私のためにうまく働いた

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

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

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

空白なしで必要な場合は、次のようにします。

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

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

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

<！> quot;ページの中央<！> quot;いつでもユーザーの画面とウィンドウのサイズに相対的です。純粋なHTML / CSSには垂直画面幅を取得する方法がないため、これを実現するにはJavascriptを使用する必要があります。

charles.cc.hsuの回答を拡張し、<=を使用して任意の高さの要素に対してこれを行うことができます>ビューポートの高さに対する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以降でサポートされているため、使用してもかなり安全です。

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top