jQuery でページをスムーズにスクロール (上または下)_jquery

この記事では、jQuery を使用してスムーズなスクロール効果を作成する方法をチュートリアルを通じて説明します。 Web ページの上部または下部にスクロールできます

仕組み
まず、 タグの終わりの前に jquery ライブラリをロードします。 >

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

jQuery を一番下までスクロールします:

リンク:
< ;a href=" #" class="scrollToBottom">一番下までスクロールjQuery

コードをコピー コード

仕組み

:
ページが読み込まれる前にコードの実行されます $(document).ready(function(){接続された .scrollToBottom クラスをクリックすると、{}
$(document).ready( function(){
$('a.scrollToBottom').click(function(){
})
}) この関数では、次のコードを実行します
$('html, body' ).animate({scrollTop : $(document).height()}, 'slow');
return false; リンクをクリックすると、関数内でコードが実行されます。ページ下部のスムーズなスクロール効果。ウィンドウの高さを使用して下部の高さを決定します。 「低速」、「中」、「高速」の速度コントロールを使用します。私は「低速」を使用しました。

jQuery 先頭にスクロール

まず、ページのフッター セクションにリンクを挿入します。クリックされると jQuery コードが実行されます。アニメーション機能。これは jQuery のクラスを参照するリンクであるため、非常に重要です。 リンク: 一番下までスクロールjQuery

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



仕組み
:

クラスがページにロードされるとき。 jQuery は、scrollToTop リンクがクリックされたときにこれを実行します。
$('html, body').animate({scrollTop:0}, 'slow'); return false; を使用すると、アニメーション化できます。数値 CSS プロパティでは、scrollTop 関数を 0 に設定します。これは、スクロール バーの最上部の位置を表します。この行では、次の点がわかります。 return false;これにより、イベントによってデフォルトのアクションがトリガーされなくなります。この場合、ユーザーはリンクできなくなります。
は次のようにすることもできます
:


コードをコピーします

コードは次のとおりです: event.preventDefault();