38

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

4

11 に答える 11

20

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

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

于 2015-03-18T13:47:16.940 に答える
15

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

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

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

于 2017-12-27T15:54:30.143 に答える
10

html：

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

css：

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

私のためにうまくいった

于 2011-03-12T00:13:15.557 に答える
7

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

于 2009-10-02T15:53:21.993 に答える
4

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

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

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

于 2016-07-25T09:52:11.273 に答える
2

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

于 2009-09-13T21:25:15.460 に答える
2

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;
}

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

于 2018-08-16T05:43:09.543 に答える
1

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

于 2009-10-02T15:55:50.303 に答える
0

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

于 2009-09-13T21:32:32.367 に答える
0

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

于 2009-10-08T13:18:18.427 に答える
0 
$(window).on("load", function () {
    var urlHash = window.location.href.split("#")[1];
    if (urlHash &&  $('#' + urlHash).length )
          $('html,body').animate({
              scrollTop: $('#' + urlHash).offset().top-100
          }, 1000);
});
于 2021-09-24T13:45:23.283 に答える