どうも。
今回はよく使うもの、Webサイトのパーツとなるようなものを書き残します。
この記事で紹介するコードはこの2つ。
- ページトップに戻るボタンの実装
- 一定量スクロールしたあとにボタンを出現させる方法
この２つ合わせて、一定量スクロールしたあとに出現するページトップに戻るボタンを作ります。
2つはバラバラでも使えるようにご紹介しています。
ページトップに戻る動作はこのページの右下にもあるボタンと同じになるので一度試してみてください。
【jQueryなし】JavaScriptのみでページトップにスムーズスクロールで戻るボタンの実装
さっそく結論となるコードから。まずはHTMLはこんな感じです。
<div class="topBtn">Top</div>デザインによってHTMLは変わると思いますが、ボタンにしたい範囲の一番外側のクラス名を使います。
”ボタン”と聞くと<a>タグを連想してしまいがちですが、<a>タグは必要ありません。
const btnTop = document.querySelector('.topBtn');
btnTop.addEventListener('click', () => {
window.scrollTo({
top: 0,behavior: "smooth"
});
});この記述で.topBtnにページトップに戻る機能がつきます。
簡単な解説。
window.scrollTo()メソッドには、スクロールする位置とスクロールの種類を指定するオプションがあります。スクロールする位置をtop: 0に設定し、スクロールの種類をsmoothに設定しています。さらにtop: 0を設定することで、ページの一番上までスクロールします。smoothを設定することで、スクロールを滑らかに実行します。
それをaddEventListener()を利用して、クリックした時にwindow.scrollTo()が発火するようにしています。
ボタン自体が消えたりする必要がなければこれだけで使えます。
クリックして発火するものになるので、ロールオーバーのアニメーションやcursor: pointer;をあてておくと◎
【jQueryなし】JavaScriptのみで一定量スクロールしたあとにボタンを出現させる方法
まずは結論となるコードを。
.topBtn {
opacity: 0;
}先に対象の要素にopacity: 0;を入れておいてください。
document.addEventListener("DOMContentLoaded", function() {
// フェード処理を適用したい要素とスピードを指定
handleScrollFade('.topBtn', 400);
});
//スクロールしてから表示する
function handleScrollFade(selector, threshold) {
let element = document.querySelector(selector);
window.addEventListener('scroll', function() {
let scrollTop = window.scrollY || document.documentElement.scrollTop;
if (scrollTop > threshold) {
fadeIn(element);
} else {
fadeOut(element);
}
});
}
function fadeIn(element) {
element.style.transition = 'opacity 0.4s';
element.style.opacity = '1';
element.style.visibility = 'visible';
}
function fadeOut(element) {
element.style.transition = 'opacity 0.4s';
element.style.opacity = '0';
element.style.visibility = 'hidden';
}
//.menuにも.topBtnと同じ動作にする
document.addEventListener("DOMContentLoaded", function() {
handleScrollFade('.menu', 400);
});こちらも簡単な解説を。
ページが読み込まれると、handleScrollFade()関数が呼び出されます。handleScrollFade()関数では、要素を取得し、スクロールイベントを監視するイベントハンドラを登録してあり、スクロール量が一定値を超えたらイベントハンドラが実行、フェードインまたはフェードアウトの処理をします。
handleScrollFade(selector, threshold) となっており、selectorに入れた要素が対象となり、thresholdに入れた数値でイベントハンドラが実行されます。上記コードでは400を指定しているので、スクロール量が400pxを超えたら、フェードインします。
今回のは汎用的に使えるように組んでいます。なにが汎用的かというとdocument.addEventListener(“DOMContentLoaded”, function() {〜}だけをコピペしたら、同じ動きを実現できるようになっているところです。（下部に.menuも同じ動作になるようコードを入れています）
メニューボタンやグローバルナビなど、トップに戻るボタン以外のものも一定量スクロールしたあとに表示させたい場合がありますからね。
よく使う動きは今回のように汎用的に組んでおくと他のページでも使えて便利です。
紹介した2つのjsを2つ組み合わせることで、タイトルにある一定量スクロールしたあとに出現するページトップに戻るボタンを実装できます。お試しください。
