jQUeryページトップ
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページトップ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
//変数にID情報を登録
var topBtn = $('#page-top');
//初期非表示
topBtn.hide();
//スクロールが80に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 80) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
<style type="text/css">
body {
background: #eee;
color: #333333;
}
#container {
background: #000;
padding: 60px;
height: 2000px;
margin: 0 auto 60px;
width: 680px;
}
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 77%;
}
#page-top a {
background: #666;
text-decoration: none;
color: #fff;
width: 100px;
padding: 30px 0;
text-align: center;
display: block;
border-radius: 5px;
}
#page-top a:hover {
text-decoration: none;
background: #999;
}
</style>
</head>
<body>
<div id="container">
</div>
<p id="page-top"><a href="#container">PAGE TOP</a></p>
</body>
</html>
