JavaScript でページの一番上にスクロールする
-
JavaScript の VanillaJS
window.scrollTo()
メソッドを使用してページの先頭までスクロールする -
アニメーション化された VanillaJS を使用してページの上部にスクロール-
window.scrollTo()
メソッドの新しい形式 -
jQuery
scrollTop()
メソッドを使用してページの先頭までスクロールする -
jQuery
animate()
メソッドを使用してアニメーション化することにより、ページの上部までスクロールする
ユーザーがページの先頭に JavaScript をスクロールできるようにするには、長い Web ページ用の UI 要素を用意することが重要です。このチュートリアルでは、一番上までスクロールするためのいくつかの JavaScript メソッドがあります。
バニラ JavaScript の scrollTo
メソッドを使用します。また、jQuery の scrollTop()
メソッドと scrollTop
プロパティを使用して一番上までスクロールする方法も示します(jQuery を使用する利点については先読みしてください)。
また、ボーナストリックを提供します。巧妙な 1 行の純粋な HTML ショートカットと、ページの先頭までスクロールするカスタムのバニラ JS アニメーションです。
JavaScript の VanillaJS window.scrollTo()
メソッドを使用してページの先頭までスクロールする
バニラ JSwindow.scrollTo()
メソッドを使用して、JavaScript でページの先頭までスクロールできます。window.scrollTo()
メソッドを使用して、ドキュメント内の指定された x 座標と y 座標のセットにスクロールできます。
このメソッドの古い形式は、次のように機能します。
window.scrollTo(x - coordinate, y - coordinate);
座標の引数として (0,0)
を渡すことにより、JavaScript でページの先頭までスクロールするために使用できます。
let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
window.scrollTo(0, 0);
});
(添付の HTML ファイルと CSS ファイルを参照して、コードを簡単に理解してください。)
このコードのデモを以下に示します。
アニメーション化された VanillaJS を使用してページの上部にスクロール-window.scrollTo()
メソッドの新しい形式
上記のソリューションは仕事を成し遂げますが、それは良い UX にはなりません。
window.scrollTo()
メソッドには、スクロール動作をアニメーション化できる新しいフォームもあります。この素敵な小さなアニメーション効果で、UX とユーザーエンゲージメントの指標を改善できます。
新しいフォームは次のように機能します。
window.scrollTo(options)
// options is a JSON objectwith
// top: the y-coordinate to scroll to
// left : the x-coordinate to scroll to
// behavior : an animated effect with vrious string values like 'smooth',
// 'slow' etc.
このメソッドのこの形式を使用して、バニラ JavaScript を使用してページの上部へのスクロールをアニメーション化できます。
let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
window.scrollTo({top: 0, behavior: 'smooth'});
});
(理解を深めるために、添付の HTML ファイルと CSS ファイルを参照してください。)
コードは単純です。スクロールトップ機能をトリガーするボタンにイベントリスナーをアタッチしました。
コールバックは、新しい形式で window.scrollTo()
メソッドを実装しました。top:0
を渡して上にスクロールし、behavior: 'smooth'
を渡して、アニメーション効果を均一にしました。
ここで動作するデモを見ることができます:
バニラ JSwindow.scrollTo()
メソッドの詳細については、こちらをご覧ください。
jQueryscrollTop()
メソッドを使用してページの先頭までスクロールする
jQuery の scrollTop()
メソッドを使用して、ページの先頭までスクロールすることもできます。
$("#top").on("click",function(){
$(window).scrollTop(0);
});
ロジックは単純です。トップボタンへのスクロールでクリック
イベントをリッスンするイベントハンドラーをアタッチしました。
コールバックは $(window).scrollTop(0)
メソッドを実行し、引数として 0
を渡したため、ページの一番上までスクロールしました。
ここで動作するデモを見ることができます:
jQueryanimate()
メソッドを使用してアニメーション化することにより、ページの上部までスクロールする
上記のバニラ JS ソリューションと同様に、jQuery を使用してページの先頭までスクロールをアニメートして、UX を向上させることができます。
$("#top").on("click",function(){
$([document.documentElement,document.body]).animate({
scrollTop:0
},1000)
});
ここでロジックを詳しく見ていきましょう。
イベントリスナーへのコールバックは、最初に document.documentElement
(ルート要素)または document.body
を選択しました。ブラウザー間の互換性を確保するには、両方を選択する必要があります。
(ヒント:これが、jQuery を使用する理由の 1つです。これについては後で詳しく説明します。)
次に、選択したオブジェクトに対して animate()
メソッドを実行し、scrollTop
プロパティを変更して 0
値(ページトップ)に到達しました。
最後に、アニメーション期間を 2 番目の引数としてコールバックに渡します。ここでは 1000 ミリ秒を経過しましたが、任意の期間を選択できます。
このメソッドの実際の出力は次のとおりです。
上級者向けのヒント:ブラウザ間の互換性を高めるために jQuery を使用しています。UI がさまざまなブラウザで奇妙にレンダリングされることがあり、トラブルシューティングが難しい場合があります。
jQuery はプロのフロントエンドライブラリであるため、このようなブラウザ間の非互換性の問題を解決できるという利点があります。したがって、一部のブラウザでバニラ JS ソリューションが機能しない場合は、代わりに jQuery バージョンのメソッドを使用できます。
1 行の賢い純粋な HTML ページの上部にスクロールハック
1 行の HTML ハックを使用して、ページの一番上まで(アニメーションなしで)スクロールすることもできます。
<div>
<a href="#">To Top</a>
</div>
これが出力のデモです。
古い scrollTop
プロパティを使用して、ページの上部にスクロールする
一部のブラウザには、上記で使用したバニラ JSscrollTo()
メソッドに問題があります。たとえば、多くのユーザーは、MSEdge がこの方法で常にうまく機能するとは限らないと報告しています。
したがって、代わりに scrollTop
プロパティを使用して古い方法を使用できます。scrollTop
プロパティは、要素を垂直方向にスクロールするピクセルを設定します。
ただし、このプロパティの特殊なケースは、ルートまたは html
要素に適用すると、ドキュメント全体が移動することです。
scrollTop
プロパティの詳細については、こちらをご覧ください。
このプロパティを使用して、ページの先頭までスクロールできます。
let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
document.getElementsByTagName('html')[0].scrollTop = 0;
});
コードは単純です。コールバックは html
要素を選択し、その scrollTop
プロパティを 0
に設定しました。
以下の動作デモをご覧ください。
JavaScript アニメーションスクリプトを使用してページの上部にカスタムスクロール
最後に、カスタムスクロールからトップへの JavaScript アニメーションを考案するためのちょっとしたスクリプトがあります。setInteval()
および clearInterval()
関数を使用して、アニメーション効果を実行します。
let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
let customAnimScroll = window.setInterval(function() {
let topOffset = window.pageYOffset;
if (topOffset > 0) {
window.scrollTo({top: topOffset - 20});
} else {
clearInterval(customAnimScroll);
}
}, 20);
});
ここでロジックを分解してみましょう。
[トップにスクロール]ボタンのイベントハンドラーへのコールバック内の window
オブジェクトで setInterval()
関数を実行しました。setInterval
関数は、特定の期間が経過した後、渡されたコールバックを繰り返し実行しました。
また、setInterval()
メソッドの特定のインスタンスを開始/停止/変更するために保存した ID も返しました。そこで、setInterval()
メソッドを実行し、その ID を customAnimScroll
変数に格納しました。
setInterval()
関数へのコールバックは、window
オブジェクトの pageYOffset
値を topOffset
変数に格納しました。この値は、window
オブジェクトが下にスクロールされるピクセル数です。
最後に、topOffset
の値が 0 より大きいかどうかを確認しました(つまり、window
が数ピクセル下にスクロールされます)。はいの場合、上記の新しい形式の scrollTo
メソッドを使用して、window
を 20 ピクセル上に移動します。
ここでは、サイクルごとに 20 ピクセル上に移動することを選択しましたが、他の数を選択することもできます。
topOffset
の値が 0 以下の場合、window
の一番上までスクロールしました。この場合、customAnimScroll
変数に以前に保存した ID を clearInterval()
メソッドに渡すことにより、setInterval()
関数を終了しました。
ここで動作するデモを見ることができます: