jQuery を使用してページのスクロール (Scroll) 効果を実現する完璧な方法

過去に多くのブロガーが jQuery を使用してページスクロール (Scroll) 効果を実現するメソッドを作成/再投稿しましたが、これまでに見つかったメソッドのほとんどには Opera での小さなバグがあります。ジャンプを直接使用すると画面がちらつきます。

今日、非常に控えめな専門家の Willin が、Opera での jQuery 実装のスクロール効果のバグを解決する完璧な方法を共有してくれました。私はそれを現在のテーマにすぐにデバッグして適用しました。これは今のところテスト済みで完璧です。特別にコードを追加して説明しました。

jsについてはあまり詳しくなく、jQueryも表面的なことしか説明できないので、修正方法のみ説明します。

デモ: 現在のトピックの下部にある「Δ」をクリックします。 zOM/記事ページのタイトル「コメントを残す」の下にある「x コメント」

前提: あなたのトップIDトピックはheader、一番下の「トップに戻る」のIDはtopです

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

document$

 windowopera ? documentcompatMode   ? $ $ $

$
scrollTop $top 
 false

手順: コメントを直接見てください

$('#top ').click(function (){...}); これはスクロールの基本的なコードです。つまり、次の例に戻ることができるため、独自の状況に応じてコードを調整できます。一番上、一番下、特定のIDまでスクロール、中央までスクロールできます...

それでは、「コメントボックス」へのスクロールの別の例を投稿します:

例: 記事タイトルの下に「コメントを追加」とあり、元のHTMLは次のとおりです

<p id="add-comment"><a href="#respond"></a></p>

(注: #respond はコメントボックスのIDです)

その後、 $('#top').click( function(){...}); このコードは次のようになります:

$
scrollTop $top 
 false

以上です、簡単ですね。友人の中には、jQ を学びに行ってくださいという原則があると言います

その他の方法については、Willin の「ページ スクロールのいくつかの方法」を参照してください

声明: この記事は BY-NC-SA 契約に基づいて承認されています。 「jQueryを使ってページスクロール(Scroll)効果を実現する完璧な方法」の転載元

全文を読む

カテゴリ: Javascript コメントを見る

以上がjQuery を使用してページのスクロール (Scroll) 効果を実現する完璧な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。