HTMLページにアンカーへのリンクがあります。リンクをクリックすると、ページがアンカーまでスクロールされ、アンカーがページの表示部分の最上部に配置されます。アンカーがページの中央にくるようにページをスクロールさせるにはどうすればよいですか?
純粋な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から高さを調整する必要があります
ページのどの部分を実際に上部に配置するかを決定し、代わりにアンカーをそこに配置します。ブラウザがアンカーを解釈する方法を変更することはできません-少なくともユーザーを混乱させることなく。
「ページの中央」は常にユーザーの画面とウィンドウのサイズに関連しているため、これを実現するにはJavascriptを使用する必要があります。純粋なHTML/CSSでは垂直画面を取得する方法がないためです。幅。
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以降でサポートされているため、かなり安全に使用できます。
ターゲットアンカータグのページの高さの半分に等しい負のマージン(または他の配置方法)を配置してみます。
Firefoxは、名前付きアンカーでのpadding-topプロパティの設定をサポートしています。そこから、ブラウザのサイズを含むjavascriptを介してCookieを設定し、それに応じてサーバー側でパディングトップを調整できます。エンドユーザーには、純粋なhtml/cssのように見えますが、noamは、ブラウザーのサイズを取得するために少しのJSが必要であるという点で正しいです。これは、少しの強制なしではこの情報を提供しないためです。