(26) ページトップに戻るボタン

投稿者: | 2017年11月1日

この記事は最終更新から 1385日 が経過しています。

(1) やりたいこと

ホームページが縦に長くなってしまったとき、一気にページ先頭に戻りたい時がある。

パソコンでの閲覧時にはキー操作で一気に戻れたりするので必要に感じることは少ないが、
携帯やスマホでは操作手段が限られるため、一押しで先頭に戻れるボタンがあると便利だ。

今回は以下の仕様で「ページトップに戻るボタン」を実装してみる。
1) ある程度下方向にスクロールしたときにボタンが出現すること。
2) ボタンは常に画面の右下に表示すること。
3) ボタン押下時はスクロールしながらページトップに戻ること。

(2) 実現方法

実装したサンプルページはこちら。
https://www.dogrow.net/hp/sample/00026/

自分の頭の中を整理するために、HTML, CSS, JSの 3ファイルに分けて実装する。

1) index.html

17行目:「ページ先頭に戻るボタン」を配置している。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./script.js"></script>
</head>
<body>

<h1>ページ先頭です。</h1>

<div style="height:2000px;padding:10px;border:2px #000 solid;background-color:#eee;text-align:center;">
長いコンテンツ
</div>

<div class="pagetop_button">↑戻る↑</div>

</body>
</html>

2) style.css

4行目: 他の要素に隠れることなく常に表示させるため。
5行目: ページ表示の初期状態では非表示。スクロール時にjsで表示に切り替えている。
6行目~8行目: ページ上での表示位置を固定にする。
11行目以下は見た目を飾っただけなので、機能を実現する上では不要なもの。

@charset "UTF-8";

div.pagetop_button{
  z-index: 9999;
  display: none;
  position: fixed;
  bottom: 20px;
  right:  20px;
}

/* 以下、別になくてもよい装飾 */
div.pagetop_button{
  padding: 5px;
  background-color: #fff;
  border: 1px #f00 solid;
  border-radius: 5px;
  cursor:pointer;
}

3) script.js

5行目: 300ピクセルを超えて下方向にスクロールしたならばボタンを表示
7行目: 300ピクセル以下ならばボタンを非表示
13行目: ボタンが押されたならば、1000msの時間をかけてスクロール量0の位置まで移動する。

$(function(){
  var pagetop_button = $('.pagetop_button');
  /////////////////////////////////////////////////////////////////////
  $(window).scroll(function(){
    if ($(this).scrollTop() > 300){
      pagetop_button.fadeIn();
    }else{
      pagetop_button.fadeOut();
    }
  });
  /////////////////////////////////////////////////////////////////////
  pagetop_button.click(function(){
    $('html,body').animate({scrollTop:0}, 1000);
  });
});

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)