Web制作をしていると実装を求められることがある「ページトップへ戻るボタン」
ケケンタ今回はそのソースコードをコピペ可能な形で丸っとご紹介します。
- 常に画面の右下に表示されている
- 一定量スクロールするとフワッとフェードインする
【ver①】ページトップへ戻るボタン｜常に表示ver
「ページトップへ戻るボタン」が常に表示されているバージョンです。
See the Pen ページトップへ戻るボタン【常に表示ver】 by ケケンタ (@lgshifbg-the-looper) on CodePen.
【ver②】ページトップへ戻るボタン｜スクロールすると表示ver
一定量スクロールすると「ページトップへ戻るボタン」が表示されるバージョンです。
スクロール量はJavaScriptで指定します。
See the Pen ページトップへ戻るボタン【スクロールされたら表示】 by ケケンタ (@lgshifbg-the-looper) on CodePen.
解説
ケケンタご興味のある方向けに簡単に解説をします。
【その①】「ページトップへ戻るボタン」のid名
ご紹介した「ページトップへ戻るボタン」はdiv要素で作成しています。
その際、最も重要なのが「id名」です。
先ほどまでのソースコードではid名を「pagetop」とし、そのdiv要素をJavaScriptで取得しています。
<!-- TOPボタン -->
<div id="pagetop" class="pagetop">Top</div>// TOPボタン
let pageTop = document.getElementById('pagetop');HTMLとJavaScriptでid名を一致させることが最も重要
【その②】「ページトップへ戻るボタン」内のテキストや画像配置について
繰り返しになりますが、「ページトップへ戻るボタン」はdiv要素のみで構成されています。
ボタンの見た目はすべてCSSで整えており、【その①】でもお伝えしたid名（pagetop）がJavaScript側での要素取得処理と一致していれば、div要素の中身やCSSは自由に改変可能です。
アイコンを設置して見た目を整えてもOK
【その③】「ページトップへ戻る」動きの指定
デモでは、ボタンを押すと滑らかな動きでページトップへ移動しています。
この動きになるよう設定しているのがJavaScriptの以下の部分です。
// TOPボタンがクリックされたらページトップへ遷移する
pageTop.addEventListener('click', () => {
window.scroll({ top: 0, behavior: "smooth" });
});behaviorのプロパティを「smooth」と指定することで、いわゆるスムーススクロールの動きになっています。
一瞬でページトップへ戻る動きにしたい場合は「auto」を指定します。
【その④】ボタンがフェードインするまでのスクロール量の指定
「ページトップへ戻るボタン｜スクロールすると表示ver」では
どれぐらいスクロールされたら表示するのかをJavaScriptの以下のハイライト箇所で設定
しています。
window.addEventListener('scroll', () => {
// スクロール量
var scrollVolY = window.scrollY;
/**
* ページ上端からのスクロール量が
* 100pxを超えたらTOPボタンを表示する
*/
if (scrollVolY > 100){
pageTop.classList.add('visible');
} else {
pageTop.classList.remove('visible');
}
});ここでは100pxと固定値で指定していますが、例えばメインビジュアルの下辺の位置を取得してそれを指定すれば、メインビジュアルを過ぎたタイミングでボタンが出現するように制御することも可能です。
まとめ
ケケンタ以上が「ページトップへ戻る」ボタンのご紹介でした！
今回ご紹介したソースコードは極力無駄を省き、機能の最小単位に近い形で記述してあります。
ご使用の際はこちらのソースコードを自由に改変していただき、目的に適した形にカスタマイズしていただければと思います。
このブログではWeb制作やWordPress、PHPの情報を発信していますので、ご興味のある方は他の記事もご覧いただけると嬉しいです。
ケケンタそれでは、最後までご覧いただきありがとうございました。
この記事が少しでもお役に立ったなら何よりです。
もしもWeb制作の独学に限界を感じたら
Web制作は未経験者でも比較的簡単に習得可能なスキルではあります。
しかしそうは言っても、Web制作を初めて学習する方にとっては覚えることが多く、独学で相談できる相手もいない状況だと気持ちが苦しくなってしまうこともあるのではないでしょうか。
そのようなときは、一度プログラミングスクールの利用を検討してみるのも良いかもしれません。
プログラミングスクールは高額な受講料がネックになることも多いですが、中には良心的な料金でWeb制作スキルを支援してくれるスクールもあります。
ご興味のある方は、以下の記事をご覧になってみて下さい。
コメント