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

巴扎黑
リリース: 2017-06-29 09:39:06
オリジナル
1684 人が閲覧しました

過去に多くのブロガーが 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!