ほとんどのサイトに設置されているであろうこのボタン。【トップページに戻るボタン】です。jQueryが使われているんです。上に一定数スクロールするとボタンが消える仕様を、今回実装したいと思います。

はじめに

こちらの動画を参考に解説します。

サンプルコード
-----------
.jsファイル

$(function(){
 $('.scroll').hide();

 $(window).scroll(function(){
   if($(this).scrollTop() > 100 ) {
     $('.scroll').fadeIn();
   } else {
     $('.scroll').fadeOut();
   }
 });

 $('.scroll').click(function(){
   $('body,html').animate({scrollTop: 0}, 500);
   return false;
 });
});


.cssファイル

 <div class="scroll-top">
  <a href="#top" class="scroll"><i class="fas fa-chevron-up fa-lg"></i></a>
 </div>

流れ

①.jsファイルで scrollクラスの要素を取得します。
②まずはhideで非表示にしておきます。
③if文を使って、スクロール量が100より大きい場合はfadeInで表示、それ以下であればfadeOutで非表示にするように記述します。

おまけ

.scrollをクリックしたときに、上に戻るアニメーションをつけたい場合の実装例です。実装理由は、単純にhtmlでリンクボタン設定で画面が一瞬で切り替わるより、アニメーションの動きで動線がわかるほうがユーザビリティに優れていて自然に見えるからです。ちなみに、戻る速さを500で設定していますが、数字が小さくなるほどスピードは早くなります。100とかだと一瞬で戻る感じです。

まとめ

正直当たり前に見る機能すぎて、実装方法を考えたこともなかったです。
今回サイト模写練習でこのボタンの実装方法がわかったので積極的に使っていきたいと思います。