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

こんにちは、Ryohei（@ityryohei）です！

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

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

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

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

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');
    }
  });
});

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

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら

Follow @itpryohei