【jQuery】一定量スクロールすると下から表示される要素を作成する

Image

スクロールすると下からにょきっと表示されるページトップへ戻るのボタンやウィンドウの下に表示されるメニューをご覧になったことがあるかと思います。要素に少し動きをつけてあげるだけでサイトに変化を付けることができるため、様々なサイトで利用されていますね!

本記事では、スクロールすると下から表示される要素として良く使われているページトップへ戻るのボタンの作成する方法をご紹介したいと思います!

下から表示される要素の作成

以下デモになります。少しスクロールすると右下からページトップへ戻るボタンが表示されます。

Demo

HTML

本記事ではページトップへ戻るボタンは画像を使用しています。また、下記ではaタグを使用していますが、任意のタグに変更していただいても大丈夫です!

<a id="pagetop" href="#"><img src="//into-the-program.com/assets/images/icon/icon_backtotop.png" alt="Scroll Top"></a>

CSS

CSSではfixedで位置を固定にしています。right、bottomは0にしておき、paddingで表示位置を調整しています。right、bottomで表示位置を指定すると、指定した位置からスライド表示されるため、paddingでの設定がおすすめです!縦横の幅やimgタグ等はデモでのスタイルになりますので、サイトに合わせて変更してご利用ください!

#pagetop {
  position: fixed;
  right: 0;
  bottom: 0;
  padding-right: 25px;
  padding-bottom: 25px;
  width: 50px;
  height: 53px;
  z-index: 10000;
}

#pagetop img {
  width: 100%;
  height: auto;
  vertical-align: baseline;
}

一定量スクロールすると下から表示される処理

スクロールすると下から出てきて表示される処理はjQueryで記述します。本記事ではページトップへ戻るボタンで解説していますが、様々な要素で応用が効きますので、ぜひお試し下さい!各行の処理についてはコメントをご参照いただければと思います!

JS

$(function() {

  //下から表示させる要素を指定
  var $pagetop = $('#pagetop');
  //一定量スクロールするまで非表示
  $pagetop.hide();

  $(window).on( 'scroll', function () {
    //スクロール位置を取得
    if ( $(this).scrollTop() < 100 ) {
      //要素をスライド非表示
      $pagetop.slideUp('slow');
    } else {
      //要素をスライド表示
      $pagetop.slideDown('slow');
    }
  });
});

以上、一定量スクロールすると下から表示される要素を作成する方法のご紹介でした!最後まで読んでいただきありがとうございました!

SHARE