jQueryを使わないJavaScriptコーディング
JavaScriptライブラリであるjQueryは、2006年にリリースされて以降広く使われてきました。
しかし、最近ではノーマルのJavaScriptの性能や機能が向上してきたことから、jQueryを使わずにノーマルのJavaScriptでWEB制作やWEB開発を行う人も増えてきています。
jQueryを使わないことで、余計なコードの読み込みを減らせたり、ライブラリのアップデートへの対応を考慮しなくて良いなど、メリットも多いです。
今回は、jQueryを使わずノーマルなJavaScriptのみで「TOPに戻る」ボタンを実装したいと思います。
スクロールすると現れる「TOPへ戻る」ボタンを実装する
「TOPに戻る」ボタンのHTML＆CSSを用意する
まずは、「TOPに戻る」ボタンの土台となるHTMLと最低限のCSSを用意しましょう。
<!-- HTML -->
<a class="to_top" id="to_top">TOPに戻る</a>/* CSS */
.to_top {
display: block;
position: fixed;
right: 20px;
bottom: 20px;
color: #fff;
background-color: orange;
height: 100px;
width: 100px;
border-radius: 9999px;
font-size: 16px;
font-weight: bold;
text-align: center;
line-height: 100px;
cursor: pointer;
}
.to_top:hover {
opacity: 0.7;
}必要に応じてボタンのテキストを変更したり、見た目を調整したりして問題ありません。
「TOPに戻る」ボタンのクリック時の機能を追加する
続いて、先ほど用意した「TOPに戻る」ボタンのクリック時にページTOPまでスクロールする機能を追加していきます。
スクロール機能はJavaScriptを使って追加します。
// ページTOPまでスクロールする関数を定義する
function toTop() {
window.scroll({
top: 0,
behavior: 'smooth' // スムーズスクロールの設定
});
}
// 「TOPに戻る」ボタン要素を取得する
const element = document.querySelector('#to_top');
// 取得した「TOPに戻る」ボタン要素がクリックされた時に、スクロールする関数を実行するように設定する
element.addEventListener('click', () => { toTop() });ページTOPへのスクロールがスムーズに動作するように設定しています。
スクロールすると現れる機能を追加する
「TOPに戻る」ボタンを初期は非表示とし、一定数スクロールしたら表示される機能を追加します。
/* CSS */
.to_top {
display: none; // 初期は非表示とする
~~
}// 「TOPに戻る」ボタンを表示（非表示）する位置
const viewOffset = 500;
// 「TOPに戻る」ボタン要素を取得する
const element = document.querySelector('#to_top');
// 指定した位置を超えたら「TOPに戻る」ボタンを表示する処理
// （超えていなかったら非表示とする）
function viewTopButton() {
if(window.scrollY > viewOffset) {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
// 画面をスクロールした時に、「TOPに戻る」ボタンの表示処理を実行するように設定する
window.addEventListener('scroll', () => { viewTopButton() });今回は、画面が500pxスクロールされたら表示するように設定しました。
画面の高さをJavaScriptを使って取得して、指定するのも良いですね。
まとめ
jQueryを使わずにノーマルなJavaScriptのみで、スクロールすると現れる「TOPに戻る」ボタンの実装についてご紹介しました。
見た目面の調整は自由にできますし、アニメーションなどを加えても良いかもしれません。
jQueryを無理やり離れる必要はないですが、ノーマルのJavaScriptも使いこなせるようになるといいですね。
コメント