jQuery(Javascript)でページトップへスクロールさせるボタンの実装方法

こんにちは、naouniverse( @naouniverse708 )です。

jQuery(Javascript)でページトップへスクロールさせるボタンを実装していたのですが、記述ミスでうまく動作してないページがあったので、改めて作り直しました。

以下、実装方法の備忘録です。

HTML、CSSでボタンをデザイン

HTMLの部分は以下をbody内に記述します。

<a style="display: block;" class="pagetop" href="#top">↑ Page Top ↑</a>

href では任意の場所を指定します。

そして、CSSでボタンのデザインをします。
シンプルで分かりやすい感じにしました。
ココは要所は抑えつつ、好みで色々いじって良いと思います。

.pagetop{
   background-color:rgba(255,0,0,0.8);
   border-radius:5px;
   color:#ffffff;
   padding:8px;
   position:fixed; /* 表示場所を固定 */
   bottom:80px;
   right:0px;
   font-family: 'Roboto Condensed', sans-serif;
   text-decoration: none;
   z-index: 100; /* 下に入り込むのを回避 */
}
/* hover時に色を変える */
.pagetop:hover{
   background-color:rgba(0,0,255,0.8);
}

GoogleにホストされているjQueryファイルの読み込み

以下をhead内に記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

jQueryでイベントを制御

以下を head 内に記述するか、以下内容の外部jsファイルを作って読み込ませます。

<script type="text/javascript">
jQuery(function(jQuery) {
  var pagetop = jQuery('.pagetop');
  pagetop.hide(); /* 最初は非表示 */
  /* ページスクロール時 */
  jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 100) {
            pagetop.fadeIn(); /* 表示 */
    } else {
            pagetop.fadeOut(); /* 非表示 */
    }
  });
  /* ボタンクリック時 */
  pagetop.click(function () {
    jQuery('body, html').animate({ scrollTop: 0 }, 500);
    return false;
  });
});
</script>

あとがき

今回まるっと書き直しましたが、割とカンタンに作り直せたので良かったです。

なお、このボタン、スマホ用のページでは実装していません。
ページデザイン上、どうしても邪魔になると感じたのと、もうひとつ理由が。

それについては、下の【関連】記事をご参照あれ。

【関連】:iPhoneのステータスバーをタップするとページトップへスクロールできる