JSでページ上に素早く配置する方法（アンカージャンプ問題）

この記事は、JS がページ上で高速な位置決めを実現する方法 (アンカー ジャンプ問題) を主に紹介しています。JS に興味のある友人は、この記事を参照してください。 1. アンカー ポイントの概要Jump

アンカーポイントとは、実際にはページを特定の位置に配置できるようにするポイントです。縦長のページでよく見られます。

アンカージャンプには 2 つの形式があります:

a タグ + name / href

属性

• タグの id 属性を使用する

• HTML 4.0 より前では、 タグのみ使用されました フラグメント識別子の作成には name 属性が必要です。 id 属性の存在により、すべての HTML 要素または XHTML 要素をフラグメント識別子にすることができます。これは、id 識別子がほぼすべてのタグで使用できるためです。 タグは、以前のバージョンとの互換性を保つために name 属性を保持しますが、id 属性も使用できます。これらの属性は互換的に使用でき、id 属性は name 属性のアップグレードされたバージョンと考えることができます。 name 属性と id 属性は両方とも href 属性と組み合わせて使用​​できるため、 タグは
ハイパーリンク

とフラグメント識別子の両方として使用できます。

<a href="#he" rel="external nofollow" rel="external nofollow" >波轮洗衣机介绍</a>
<a href="#f" rel="external nofollow" ></a>

しかし、この方法は空のタグを使用するため、アンカーポイントが失敗することがあります。したがって、アンカーポイントをバインドするには、id を使用することをお勧めします。 コードは次のとおりです:

<a href="#he" rel="external nofollow" rel="external nofollow" >波轮洗衣机介绍</a><h2 id="#de">波轮洗衣机介绍</h2>

2. アンカーポイントジャンプを含む URL アドレス

【1】 # について

ページの の制作では、「#」記号は非常に一般的かつ普遍的です。基本的に、これが意味するのは ID セレクターです。同様に、ページの URL の # は、id セレクターの意味、つまり、指された URL を含む id タグにページがジャンプするという意味としても理解できます。

このアドレスの最後に「#」があります。これは、ブラウザにジャンプするように指示するのと同じです。# は、アドレスが http://www.php.cn/view/121416 にあることを意味します。ページ内で .htm?p =1 を実行すると、#3 の特性に一致するタグが検索され、ジャンプが実行されます。

【2】空のアンカーポイントについて

URLの#に続く文字IDが本文中に見つからない場合は、現在のページ上にある場合、URLアドレスが変更されている場合の2つの状況が考えられます。 、その他は変更されず、ページはジャンプしません; 他のページからジャンプした場合、そのページは上部に表示され、「#」は基本的に装飾です。

【3】window.location.hash

3. Jquery下のアンカーポイントのスムーズなジャンプ。

box の ID を持つ要素までページをスムーズにスクロールさせる場合、JQuery コードに必要なのは 1 文のみで、キーの位置は次のとおりです:

$('html, body').animate({scrollTop: $('#box').offset().top}, 1000)

JS ネイティブ実装。

scrollTo() メソッドは、指定された座標までコンテンツをスクロールできます。

scrollTo(xpos,ypos);

4. IEでのアンカーポイント更新失敗とJQueryでの解決策

【1】アンカーポイント更新失敗について

アンカーポイント更新失敗とは、URLがの後にはアンカーポイントが続きますが、このアンカーポイントも無効になります。

【2】Jqueryでは実装は難しくありません。 URL に基づいてアンカー ポイントを取得し、対応するアンカー ポイント

オブジェクト
をさらに取得し、ページのスクロール高さをページの上部からのオフセット値

にすることができます。これにより、ページが再読み込みまたは更新されたかどうかに関係なく、その背後にあるアンカー ポイントが機能するようになります。

$(function() {
  var url = window.location.toString();
  var id = url.split('#')[1];
  if (id) {
    var t = $('#' + id).offset().top;
    $(window).scrollTop(t);
  }
})

以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです！ ！

関連する推奨事項:

JavaScriptでjsを呼び出す必要があるの説明

JavaScriptの二重等号の暗黙的変換メカニズムの分析

JavaScript二重リンクリストの定義と使用方法

以上がJSでページ上に素早く配置する方法（アンカージャンプ問題）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。