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

誘導したいコンテンツへのリンクやページ上部へ戻るボタン等で見かける、ページをスクロールするとふわっと表示される要素。今回はページ最上部ではボタンを非表示にしておき、少しスクロールした際に表示されるボタンをjQueryで制作します。

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

HTML
CSS：表示位置を固定
jQuery：表示をスクロール位置で制御
CODEPENによる動作サンプル

HTML

<a id="sample-btn">サンプルボタン</a>

CSS：表示位置を固定

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

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

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

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

jQuery(function($){
  var btn = $('#page-top');    
  btn.hide();
  $(window).scroll(function () {
    if ($(this).scrollTop() > 300) {
      btn.fadeIn();
    } else {
      btn.fadeOut();
    }
  });
});

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

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

CODEPENによる動作サンプル

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

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