ロードを通じてファイルのコンテンツを取得し、アンカー point_jquery にジャンプする jquery メソッド

この記事の例では、jquery がロードを通じてファイルのコンテンツを取得し、アンカー ポイントにジャンプする方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

昨日、左側にナビゲーション、右側にコンテンツを配置したヘルプドキュメントのようなページを作成していました。右側のコンテンツ表示領域は当初iframeを使用して実装する予定でしたが、iframeの高さを調整する必要があったため方法を変更し、jqueryのajaxのloadメソッドを使用しました。

リモート ファイルの内容を取得するのは簡単です。jquery のloadメソッドを使用するだけです。

$("#content").load("xxx.aspx")

これにより、xxx.aspx ファイル内のコンテンツを、コンテンツの ID を持つタグ内に簡単に配置できるようになります。ここで達成する必要があるもう 1 つの効果は、ファイルのコンテンツを取得した後、対応するアンカー ポイントにジャンプする必要があるため、jquery のscrollTop を使用することを考えました。たとえば、ファイルのコンテンツを取得した後、次のようにします。 id="name" :

のタグに移動する必要があります

$("body,html").animate({scrollTop:$("#name").offset().top});

offset() は、現在のビューポート内の一致する要素の相対オフセットを取得します。 $("#name").offset().top は、ID 名の先頭からのラベルの相対オフセットを取得します。現在のビューポート。上記のコードを 1 つの部分に結合するには、次のように記述する必要があります:

$(function(){
 $("#content").load("xxx.aspx",function(){
  $("body,html").animate({scrollTop:$("#name").offset().top});
 });
})

ナビゲーションをクリックしてサーバーにリクエストを送信し続けることを避けるために、毎回取得したデータを保存できます。

もちろん、この方法は SEO の最適化を考慮していないページにのみ適しています。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。