JQuery アニメーション ページ スクロール トップに戻る アニメーション効果 (Chrome と互換性あり)_jquery

まず、これらの「トップに戻る」リンクにクラスを追加します。
トップに戻る↑ ;!-- ページの先頭に戻るすべてのリンクにクラスを追加します。例: backtotop--> 次に、このコード行を の前または他の場所に追加します。 。もちろん、jQuery ライブラリ ファイルを に含める必要もあります。 (

コードをコピー コードは次のとおりです:

jQuery(document).ready(function) () {
jQuery('.backtotop').click(function(){
jQuery('html').animate({scrollTop:0}, 'slow');
}

基本的には、jQuery ('html') を使用すると、Safari と Chrome で必要なオブジェクトを選択できません (どこかで見た覚えがあります。Chrome は Safari のコアを使用します)。したがって、コードの互換性を高めるために、ここでは jQuery1.3 で提供される jQuery.browser メソッドを使用します。 、このメソッドは推奨されなくなりました。jQuery1.3 では、さまざまなブラウザーのそれぞれの機能とバグのプロパティ コレクションを表示するための新しい jQuery.support メソッドが追加されました。これは、ブラウザーを判断するために、jQuery1.3 が推奨されなくなったことを意味します。特定の機能を直接判断することをお勧めしますが、このセレクターの問題がどの機能に属するかわからないため、古い方法（jQuery1.3のjQuery.browserメソッド。まだサポートされています）を使用しています

コードをコピーします コードは次のとおりです:

jQuery(document).ready(function () {
jQuery( '.backtotop').click(function(){
if(jQuery.browser.safari) {//ここでブラウザが safari かどうかを判断します
jQuery('body') .animate({scrollTop:0 }, 'slow');
return false;// false を返すと、元のリンクの後に # を追加することを避けることができます
}
else{
jQuery('html') .animate({scrollTop:0) }, 1500);
return false;
}
});


上記のコードでは、Go to jQuery('body') を使用します。 ).animate({scrollTop:0}, 'slow'); 実際のニーズに応じてスクロール速度を変更できます。「遅い」、「速い」、または 1000 (1 秒を表します) などの特定の数値を使用できます。 、特定の数値を使用する場合は一重引用符を追加する必要がないことに注意してください)。 さらに、{scrollTop:0} は、ページの先頭に戻ることを意味します。ページを特定の場所までスクロールしたい場合は、たとえば次のようにラベル (ID) メソッドを使用できます。 ID が 'myID' のエリア (

....

) 上部でも同様の方法を使用できますが、最初にこのエリアとページの先頭 コードは次のとおりです:

コードをコピーします コードは次のとおりです:

jQuery('body').animate({scrollTop:jQuery('#myID ').offset().top}, 'slow');

//jQuery('#myID').offset(); .top は、ID myID

の領域でページの先頭までの距離を計算できます。