【今さら聞けない】ページトップへ戻るボタン作ってみた。javascript / jQuery

CSS

こんにちは、ゆうごろうです。

ページのトップに戻るボタンって便利ですよね。コンテンツを下の方にスクロールしていって、一番上戻りたいなって時に使うアレです。（正式名称はワカラナイ…。）

今回は現場で使用する機会の多い、ページトップへ戻るボタンを作っていきます。

自分でアレンジも可能なので、ぜひ自分で実装してみてください！

目次

完成例

完成すると以下のような実装になります。右下の矢印マークです！

今回は私のポートフォリオサイトを使って実装をしていきます。

クリックするとアニメーション付きでページのトップへ戻るようになっていますね。

また、スクロールする位置によって矢印の表示、非表示が切り替わっているのがわかりますね。

クリン
クリン

下の方にスクロールすることでふわっとでてくる！

実装方法

さっそく解説していきます。

HTML

なんとHTMLの記述はこれだけでいいのです。

基本的に文字を表示するよりかは、画像を使用することが多いですね。

<a id="js-pagetop" href="#" class="pagetop"><img src="./img/pagetoppng.png" alt="ページトップ" /></a>

CSS

.pagetop {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: min(13.3333333333%, 50px);
  /*通常は非表示*/
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.pagetop .is-show {
    opacity: 1;
    visibility: visible;
  }

javascript

//ページトップへ戻るボタン
const pageTop = document.querySelector("#js-pagetop");

window.addEventListener("scroll", function () {
  if (100 < window.scrollY) {
    pageTop.classList.add("is-show");
  } else {
    pageTop.classList.remove("is-show");
  }
});

//スムーズに移動する
pageTop.addEventListener("click", function (e) {
  e.preventDefault();
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
});

実装方法の解説

では順に実装方法を解説していきます。

CSS

まず、position:fixed;で固定の位置で表示されるようにします。（fixedに伴うrightなどのプロパティを設定していきます。）

特に注目してほしいコードを抜き出します。

.pagetop {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.pagetop .is-show {
    opacity: 1;
    visibility: visible;
}

スクロールをした時にふわっと現れたり、消えたりするのはこの「is-show」クラスをつけ外しすることで制御をしています！

なぜこのようなことをするのかというと、まずはユーザーの視点に立って考えていただきたいです！

ページ上部に戻るためのボタンは、ページ一番上で表示されていても意味がありません、むしろ邪魔な存在と化してしまいます。

ユーザーからしたら「なんでこんなボタンあるの？」ってなりますよね…。

ゆうごろう
ゆうごろう

そこでデフォルトではopacityを0、visibilityをvisibleにして、画面で一定の距離スクロールされたら非表示にするような動きにしています。

参考：opacityとvisible

opaciryとvisibleを併用する理由は、レイアウトに影響することなく要素を表示、非表示を切り替えるためです！

opacityを使用して要素を透明、不透明にする制御ができますが、opacityが0の状態ではクリックができてしまいます。透明になっているのにクリックできるのはおかしいですよね。

そこでvisiblityの出番で、visibilityの値をvisibleに設定しておくとクリックができなくなります。

visibilityの値だけを設定しておくと、ふわっとしたアニメーションが作れないのでopacityとvisibleプロパティ両方指定してあげる必要があるんですね！

クリン
クリン

display:none;ではダメなんですか？

display:none;ではアニメーションをつけることができないんだ。
display:none;で実装をする場合はjQueryのfadeInメソッドを使うようにしよう。
javascriptでfadeInを実装してもいいです！

ゆうごろう
ゆうごろう

javascript

すでに解説してしまっておりますが、一定の距離スクロールされた時点で表示、非表示を切り替える処理を行います。

また、クリックされた時にページトップへスムーズに移動するように設定します。

//ページトップへ戻るボタン
const pageTop = document.querySelector("#js-pagetop");

window.addEventListener("scroll", function () {
  if (100 < window.scrollY) {
    pageTop.classList.add("is-show");
  } else {
    pageTop.classList.remove("is-show");
  }
});

//スムーズに移動する
pageTop.addEventListener("click", function (e) {
  e.preventDefault();
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
});
  1. window.addEventListenerメソッドでスクロールを検知する。
  2. スクロールされた距離が100px以上であれば、要素を表示するクラス「is-show」を付与する。
  3. window.scrollToメソッドでクリックした時にスムーズに移動するよう設定する。

どうでしょう、やっていることはそこまで難しくないのではないでしょうか！

javascriptはプログラミング言語なので苦手意識を感じる人も多いですが、サイトの表現を豊かにしてくれる友達なのでどんどん活用していきましょう！

参考：jQueryで実装する場合

jQueryで書く場合はよりシンプルな書き方になります！こちらもプロジェクトの要件によって変わってきますので参考にしてください！

$(window).on("scroll", function () {
  if (100 < $(window).scrollTop()) {
    $("#js-pagetop").addClass("is-show");
  } else {
    $("#js-pagetop").removeClass("is-show");
  }
});

$pageTop.on('click', function (e) {
    e.preventDefault();
    $('html, body').animate({ scrollTop: 0 }, 'smooth');
  });

まとめ

今回はトップぺ戻るボタンの実装方法について解説していきました！

プロパティの役割やjavascriptの記述について再確認、学びがあったのではないでしょうか。

ですが、今回紹介した実装方法は一例です！実装の方法はたくさんあると思います。

では、まとめ入ります。

まとめ

  • トップへ戻るボタンはposition:fixed;でページに固定で表示させる（プロジェクト要件により変わります）
  • クラスをつけ外しすることで表示と非表示を切り替える
  • スムーズに移動するようアニメーションをつける

もしこの記事が参考になれば幸いです！