TOPへ戻るボタンをつくる - WEB制作の備忘録

Illustratorでボタンを作る

100×100pxの正円
上向きの三角形
png-24で書き出し

見やすいサイズでお好みで作成してください

HTMLとCSSを記述

【index.html】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>トップへ戻るボタン</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  var topBtn = $('#to-top');
  topBtn.hide();
  //スクロールが100に達したらボタン表示
  $(window).scroll(function(){
     if($(this).scrollTop() > 100) {
       topBtn.fadeIn();
      } else {
       topBtn.fadeOut();
      }
   });
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});
</script>
</head>
<body id="top">
<div id="container">
<header>
<h1>大見出し</h1>
</header><!--/header-->
<div id="content">
<div class="box"></div>
<div class="box"></div>
<div class="box right"></div>
<div class="box size-2"></div>
<div class="box right"></div>
</div><!--/#content-->
</div><!--/#container-->
<p id="to-top"><a href="#top">トップに戻る</a></p>
</body>
</html>

【style.css】

@charset "UTF-8";

/* reset */
html,body,div,h1,p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;  
}
a {
  text-decoration: none;
}
img {
  border: none;
  vertical-align: none;  
}

/* body */
body {
  font-size: 16px;
  background: #AAA;
}

/* layout */
#container {
  width: 960px;
  height: 2000px;/* 内容がないため高さを出す */
  margin: 0 auto;
  padding-top: 20px;
}
header {
  width: 960px;
  background-color: #888;
  border: 5px solid #FFF;
  border-radius: 10px;
  box-sizing: border-box;/* ボーダーを内側へ */
  text-align: center;
}
h1 {
  color: #FFF;
  margin: 40px 0 40px 0;
  font-size: 44px;
}
.box {
  width: 312px;
  height: 312px;
  background: rgba(255,255,255,0.7);
  float: left;
  margin-right: 12px;
  margin-top: 12px;
}
.right {
  margin-right: 0;
}
.size-2 {
  width: 636px;
}
#to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: url(../img/btn.png);
}
#to-top a {
  display: block;
  width: 100px;
  height: 100px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

ポイント

HTML：jQuery外部ソースをリンク

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

HTML：トップに戻るを記述

<p id="to-top"><a href="#top">トップに戻る</a></p>

CSS：トップに戻るのスタイルを記述

#to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: url(../img/btn.png);
}
#to-top a {
  display: block;
  width: 100px;
  height: 100px;
  text-indent: 100%;/* 隠し文字 */
  white-space: nowrap;/* 隠し文字 */
  overflow: hidden;/* 隠し文字 */
}

HTML：スクリプトを記述

<script type="text/javascript">
$(function(){
  var topBtn = $('#to-top');
  topBtn.hide();
  //スクロールが100に達したらボタン表示
  $(window).scroll(function(){
     if($(this).scrollTop() > 100) {
       topBtn.fadeIn();
      } else {
       topBtn.fadeOut();
      }
   });
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});
</script>