ホームページ >ウェブフロントエンド >jsチュートリアル >JSでページ上に素早く配置する方法（アンカージャンプ問題）

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

韦小宝オリジナル: 2018-01-22 09:58:012271ブラウズ

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

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

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

a タグ + name / href

タグの id 属性を使用する
HTML 4.0 より前では、ef85e6ba73fddef09a87ec3e6478eaf2 タグは、以前のバージョンとの互換性を保つために name 属性を保持しますが、id 属性も使用できます。これらの属性は互換的に使用でき、id 属性は name 属性のアップグレードされたバージョンと考えることができます。 name 属性と id 属性は両方とも href 属性と組み合わせて使用できるため、3499910bf9dac5ae3c52d5ede7383485 タグは

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

<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 文のみで、キーの位置は次のとおりです:

$(&#39;html, body&#39;).animate({scrollTop: $(&#39;#box&#39;).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(&#39;#&#39;)[1];
  if (id) {
    var t = $(&#39;#&#39; + id).offset().top;
    $(window).scrollTop(t);
  }
})

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

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

関連記事