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タグへのプロパティ指定が必要なので、覚えておきましょう。
JavaScriptでスムーススクロールを実装する方法もあります。CSS だけで作る場合、スムーススクロールは細かな調整ができないデメリットがあるので、細かいアンカーのスクロールを入れる場合はJavaScriptの実装も検討するようにしましょう。
さいごに
ページの右下でよく見かける「トップに戻る」ボタンは、この記事のスニペットをベースにCSSの position:fixed を併用すれば簡単にできるので、是非参考にしてみてください。
