1,052 views
この記事は最終更新から 2431日 が経過しています。
(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);
});
});