jQueryやスマートフォンが流行るようになってきてからスクロールしたあとに「上へ戻る」ボタンが作られるようになってきました。今回はそれを作っていきたいと思います。7月19日記事
イメージ
全体はこんな感じ
最初はボタンがあらわれないが
下の方にいくとあらわれる
目次
HTML部
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<title>トップに戻るボタン作り</title>
</head>
<body>
<div id="header_contents">
<p>header</p>
</div>
<div id="menulist">
<p>
<a href="#A">Aへ移動</a>
<a href="#B">Bへ移動</a>
<a href="#C">Cへ移動</a>
<a href="#D">Dへ移動</a>
<a href="#E">Eへ移動</a>
<a href="#F">Fへ移動</a>
</p>
</div>
<div class="contents A"><!--.contentsと.A二つクラスを読み込む-->
<p id="A">A</p>
</div>
<div class="contents B">
<p id="B">B</p>
</div>
<div class="contents C">
<p id="C">C</p>
</div>
<div class="contents D">
<p id="D">D</p>
</div>
<div class="contents E">
<p id="E">E</p>
</div>
<div class="contents F">
<p id="F">F</p>
</div>
</body>
</html>
CSS部
@charset "utf-8";
/* CSS Document */
#header_contents{
background: #FCC;
margin : 0 auto;
width: 1000px;
height: 300px;
border: 1px solid #000;
}
#menulist{
background: #CFC;
margin : 0 auto;
width: 1000px;
height: 100px;
border: 1px solid #000;
}
.contents{
margin : 0 auto;
width: 950px;
height: 500px;
background: #EEE;
}
p{
font-size: 50px;
}
.A{
border-left: 50px solid #FF0;
}
.B{
border-left: 50px solid #F0F;
}
.C{
border-left: 50px solid #0FF;
}
.D{
border-left: 50px solid #F00;
}
.E{
border-left: 50px solid #0F0;
}
.F{
border-left: 50px solid #00F;
}
以下のようになると思います。
photoshopで作ったりaタグをブロックにしたりし作ってください。
今回画像で作りました。
50pxバージョン
100pxバージョン
どこでもいいので、以下のようなHTMLとCSSを書きます。
HTML部
<div id="pagetop"> <a id="move-pagetop"><img src="button100.png" alt="トップへ"></a><!--hrefは作らずidだけ指定する--> </div>
CSS部
/*ページトップへ*/
#pagetop{
position:fixed;
right:20px;
bottom:20px;
display: none;
}
#move-pagetop{
display:block;
}
jQuery部<head>タグ内に書いてください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
//ウインドウのスクロール時
$(window).scroll(function(){
//現在の高さ取得
var nowheight = $(window).scrollTop();
if(nowheight > 700){
$('#pagetop').fadeIn('slow');
}else{
$('#pagetop').fadeOut('slow');
}
});
//押された時
$('#move-pagetop').click(function(){
$('html,body').animate({scrollTop:0},'slow');
});
});
</script>
ボタンCSSの方は
position:fixedと、display:none
が重要で、常に固定化されたボタンと、fadeInを表示させるために必要なdisplay:none(何にもないところからフェードインさせる)を記述することが重要です。
また、jQueryは
ウインドウのスクロール時のボタンの表示の挙動と押された時の表示の挙動
を二つにわけてプログラムを書きます。
さらに、jQueryはウインドウのスクロール時のボタンの表示の挙動は
現在の高さに応じて、表示させるか否か
をやれば、完成します。
以上
