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

WBOY
リリース: 2016-05-16 18:34:30
オリジナル
1244 人が閲覧しました

まず、これらの「トップに戻る」リンクにクラスを追加します。
トップに戻る↑ ;!-- ページの先頭に戻るすべてのリンクにクラスを追加します。例: 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

の領域でページの先頭までの距離を計算できます。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート