nicepaper @ ウィキ
nicepaper @ ウィキ

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+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とCSSで上へ戻るボタンを作る」をウィキ内検索
最終更新：2015年07月19日 22:54