$(document).ready(function(){
$('#topBtn').click(function () { // #topBtnをクリックすると
$('body,html').animate({ // いちばん上にanimateする
scrollTop: 0 // 戻る位置
}, 400); // 戻るスピード
return false;
});
});
<div class="wrapper">
<header class="header" id="top">
<p>ヘッダー</p>
</header>
<div class="contents">
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。<br><br>
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。<br><br>
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。<br><br>
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。<br><br>
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。<br><br>
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。<br><br>
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。<br><br>
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。<br><br>
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。<br><br>
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。<br><br>
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。<br><br>
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。<br><br>
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。<br><br></p>
</div>
<!--固定ボタン-->
<a href="#" class="topBtn" id="topBtn">TOP</a><!--/固定ボタン-->
<footer class="footer">
<p>フッター</p>
</footer>
</div>
/*トップへ戻るボタン*/
.topBtn {
position:fixed; /*固定*/
bottom:20px; /*場所を右下に移動*/
right:20px; /*場所を右下に移動*/
display:block; /*aタグをblock要素に変更*/
background-color:rgba(0,0,0,0.5); /*以下、デザインはご自由に!!*/
color:#fff;
text-decoration:none;
font-weight:bold;
font-size:11px;
width:60px;
height:60px;
text-align:center;
line-height:22px;
border-radius:30px;
padding-top:30px;
box-sizing:border-box;
}
.topBtn:before {
content:'\25B2';
position:absolute;
top:10px;
left:0;
width:100%;
text-align:center;
font-size:20px;
}
.topBtn:hover {
opacity:0.7;
}
/*layout*/
.wrapper {
position:relative;
}
body {
color:#333;
font-size:18px;
line-height:1.8em;
letter-spacing:0.05em;
}
.header {
height:40px;
line-height:40px;
text-align:center;
background-color:#eed;
}
.contents {
margin:40px 40px 60px 40px;
}
.footer {
height:200px;
line-height:200px;
text-align:center;
background-color:#eed;
}
External resources loaded into this fiddle: