CSSだけで、色々できるようになりましたよね。位置の細かい調整はできませんが、「スムーススクロール」もCSSだけで実装可能です。
そんなCSSのスムーススクロールにJavaScriptのコードを追加して、「一番上・一番下にそれぞれスムーススクロール」をさせるスニペットを作ってみました。
簡単なコードでできる内容です。
是非、最後までご覧いただけたら嬉しいです。
window.scroll
JavaScriptの window.scroll
は、文書内の特定の位置までスクロールするメソッドです。
window.scroll({top: 0});
この記事では、window.scroll
メソッドに scrollHeight
と clientHeight
プロパティを加えてスムーススクロールをさせています。
ボタンクリックでスムーススクロールするサンプル
早速サンプルです。
2つのボタンが並んでいますが、表示の通り「一番上にスクロール」でページの一番上へ。「一番下にスクロール」でページの一番下にスクロールします。
スクロールは一気に飛ぶのではなく、滑らかにスクロールする「スムーススクロール」で移動します。
スムーススクロールじゃない方が今は少ないかもしれません。そんなスクロールをJavaScriptで作ります。
実装の手順と方法
各コードの解説の前に、実装の手順と方法について簡単にご説明します。
はじめに、ボタンを設置したい場所に以下のコードを記述します。
<button id="upScroll">一番上にスクロール</button>
<button id="downScroll">一番下にスクロール</button>
次に、JavaScriptのコードをページに記述します。
コードは <body>〜</body>
で、</body>
の閉じタグ(クロージングタグ)の前に記述しましょう。
// 一番上へ
document.getElementById('upScroll').addEventListener('click', () => {
var a = document.documentElement;
var y = a.scrollHeight - a.clientHeight;
window.scroll({top: 0});
});
// 一番下へ
document.getElementById('downScroll').addEventListener('click', () => {
var a = document.documentElement;
var y = a.scrollHeight - a.clientHeight;
window.scroll(0, y);
});
最後にCSSを記述して完了です。
html{
scroll-behavior: smooth; // スムーススクロール
}
ざっくりとしたコードの解説
コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。
HTML
HTMLは、各id名を付与した button
タグが並ぶシンプルな記述内容です。
<button id="upScroll">一番上にスクロール</button>
<button id="downScroll">一番下にスクロール</button>
メンテしやすいよう onclick
にはせず、HTMLをシンプルにする方が好みだからこの記述です・・・。
JavaScript
JavaScriptは、「一番上へ」と「一番下へ」のそれぞれで .addEventListener
のクリックイベントで処理で、スクロールさせる内容と位置を分けています。
// 一番上へ
document.getElementById('upScroll').addEventListener('click', () => {
var a = document.documentElement;
var y = a.scrollHeight - a.clientHeight;
window.scroll({top: 0});
});
// 一番下へ
document.getElementById('downScroll').addEventListener('click', () => {
var a = document.documentElement;
var y = a.scrollHeight - a.clientHeight;
window.scroll(0, y);
});
各処理内容で記述している scrollHeight
と clientHeight
の内容は以下の通りです。
- scrollHeight:要素の中身(ページ)の高さ
- clientHeight:表示域(ブラウザ)の高さ
これで計算を行い、window.scroll
で指定位置へスクロールをさせています。
CSS
CSSは以下の一文だけでスムーススクロールを実装可能です。
html{
scroll-behavior: smooth; // スムーススクロール
}
スムーススクロールはこれだけのコードでOKですが、html
タグへのプロパティ指定が必要なので、覚えておきましょう。
さいごに
ページの右下でよく見かける「トップに戻る」ボタンは、この記事のスニペットをベースにCSSの position:fixed
を併用すれば簡単にできるので、是非参考にしてみてください。