「jQueryとCSSで上へ戻るボタンを作る」の編集履歴（バックアップ）一覧に戻る
jQueryやスマートフォンが流行るようになってきてからスクロールしたあとに「上へ戻る」ボタンが作られるようになってきました。今回はそれを作っていきたいと思います。7月19日記事
~
イメージ
~
全体はこんな感じ
#image(width=400,001.png)
最初はボタンがあらわれないが
#image(width=400,002.png)
下の方にいくとあらわれる
#image(width=400,003.png)
~
~
目次
#contents
~
*まずは全体の枠組み作り
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;
}
以下のようになると思います。
#image()
*ボタン作り
photoshopで作ったりaタグをブロックにしたりし作ってください。
今回画像で作りました。
#image(button.png)
や
#image(button100.png)
*ボタン配置のHTML+CSS+jQuery
どこでもいいので、以下のような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>
*まとめ
jQueryはウインドウのスクロール時のボタンの表示の挙動と押された時の表示の挙動を二つにわけてプログラムを書きます。
~
さらに、ウインドウのスクロール時のボタンの表示の挙動は現在の高さに応じて、表示させるか否かをやれば、完成します。
~
~
以上
