スクロールするとフェードインでふわっと表示されるボタンの制作【jQuery】

ページをスクロールするとふわっと表示される、ページ上部へ戻るボタン。スマートフォンでの閲覧に最適化されたページは縦長になることが多く、そんなときに最上部へ戻るボタンがあると便利です。今回はページ最上部ではボタンを非表示にしておき、少しスクロールした際に表示されるボタンをjQueryで制作します。

構造やデザインをカスタマイズする際の汎用性を考慮し、なるべくシンプルなソースで再現しています。好みに応じてアレンジしてご利用ください。

HTML

<a id="page-top">ページの上部へ</a>

CSS:表示位置を固定

最低限の装飾のみ指定しています。制作するウェブサイトに合わせて自由に編集してご利用ください。

#page-top{
  position: fixed;
  bottom: 20px;
  right: 20px;
  border: 1px solid #AAA;
  cursor: pointer;
}

jQuery:表示をスクロール位置で制御

WordPressで利用できる書き方jQuery(function($){で始めています。この内容を記したjsファイルを作成し<head>で読み込んでください。

jQuery(function($){
  var topBtn = $('#page-top');    
  topBtn.hide();
  $(window).scroll(function () {
    if ($(this).scrollTop() > 300) {
      topBtn.fadeIn();
    } else {
      topBtn.fadeOut();
    }
  });
  topBtn.click(function() {
    $("html, body").animate({ scrollTop: 0 }, 400);
    $("html, body").animate({ scrollLeft: 0 }, 400);
  });
});

2行目:ボタンの要素を指定します。
3行目:要素を非表示

4~10行目
スクロール量が300pxより大きい場合ボタンを表示、300px以下の場合は非表示。
fadeIn()fadeOut() でフェード効果付きの表示、非表示を行います。2行目ではフェード効果が無いほうがよいので hide() を使っています。

11~14行目
ボタンがクリックされた際、ページ最上部左端までスクロールします。

CODEPENによる動作サンプル

右側のHTML部分をスクロールするとボタンがふわっと表示されます。

See the Pen by web-souko (@web-souko) on CodePen.

タイトルとURLをコピーしました