「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タグをブロックにしたりし作ってください。
今回画像で作りました。
~
~
50pxバージョン
#image(button.png)
100pxバージョン
#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>
*まとめ
ボタンCSSの方position:fixedと、display:noneが重要で、常に固定化されたボタンと、fadeInを表示させるために必要なdisplay:none(何にもないところからフェードインさせる)を記述することが重要です。
~
また、jQueryはウインドウのスクロール時のボタンの表示の挙動と押された時の表示の挙動を二つにわけてプログラムを書きます。
~
さらに、jQueryはウインドウのスクロール時のボタンの表示の挙動は現在の高さに応じて、表示させるか否かをやれば、完成します。
~
~
以上
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;
}
以下のようになると思います。
*ボタン作り
photoshopで作ったりaタグをブロックにしたりし作ってください。
今回画像で作りました。
~
~
50pxバージョン
#image(button.png)
100pxバージョン
#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>
*まとめ
ボタンCSSの方は&color(red){position:fixedと、display:none}が重要で、常に固定化されたボタンと、fadeInを表示させるために必要なdisplay:none(何にもないところからフェードインさせる)を記述することが重要です。
~
また、jQueryは&color(red){ウインドウのスクロール時のボタンの表示の挙動と押された時の表示の挙動}を二つにわけてプログラムを書きます。
~
さらに、jQueryはウインドウのスクロール時のボタンの表示の挙動は&color(red){現在の高さに応じて、表示させるか否か}をやれば、完成します。
~
~
以上
