【コピペOK!】ページトップボタンを簡単に実装する方法

おはようございます！社員Aです👩

今回はWEBサイトでよく見る「topへ戻る」ボタンの実装方法をご紹介します。

コピペで実装できるので、ぜひ！

ふわっと表示されるページトップへ戻るボタン

ページTOPへ戻るボタンのはこんな感じです。

最上部まで戻るとふわっと消えて、スクロールしていくうちにふわっと現れます。

ぜひ、この記事内でスクロールしてみてください！

ページトップボタン実装方法【丸バージョン】

このサイトでも使っているデフォルトのページトップボタンの実装方法です。

CSSなどをカスタマイズして、お好きなように変更してみてください！

HTML

<!-- ページトップへ戻るボタン -->
<p class="pagetop" style="display: block;">
<a href="#">
<i class="fas fa-chevron-up"></i>
</a>
</p>

CSS

/* ページTOPに戻る */
.pagetop{
    display: none;
    position: fixed;
    right: 15px;
    bottom: 60px;
}
.pagetop a{
    display: block;
    font-size: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    background: #7db4e6;
    border-radius: 50%;
    line-height: 50px;
}
.pagetop a i{
    font-size: 20px;
    color:#fff;
    line-height: 50px;
}

js

$(window).scroll(function () {
  var now = $(window).scrollTop();
  if (now > 200) {
    $('.pagetop').fadeIn("slow");
  } else {
    $('.pagetop').fadeOut('slow');
  }
});

ページトップボタン実装方法【スクエアバージョン】

先ほどとHTML・js部分は同様で、CSSのみ下記のように記述すると、スクエアタイプのページトップボタンが実装できます。

CSS

/* ページTOPに戻る */
.pagetop{
    display: none;
    position: fixed;
    right: 15px;
    bottom: 60px;
}
.pagetop a{
    display: block;
    font-size: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    background: #7db4e6;
    line-height: 50px;
}
.pagetop a i{
    font-size: 20px;
    color:#fff;
    line-height: 50px;
}

まとめ

手軽に実装できるページトップボタン2種類をご紹介しました。

ページが長くなると、ページトップまで戻るのが大変になるので、このボタンを実装するだけでユーザビリティアップに繋がりますね。

背景色や大きさもCSSでカスタマイズすれば、オリジナル感も出せるかと思います。

是非試してみてください。