トップに戻るボタン

参照サイト→http://www.webopixel.net/javascript/538.html

デフォルト

html

PAGE TOP

css

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;

}

javascript
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});