トップへ戻るボタン

html

<a href="#header" id="page-top"><span class="arrow"></span></a>

javascript

$(function () {
var pageTop = $("#page-top");
pageTop.hide();
pageTop.click(function () {
$('body, html').animate({
scrollTop: 0
}, 500);
return false;
});
$(window).scroll(function () {
if ($(this).scrollTop() >= 200) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
});

css

page-top {
display: block; position: fixed; z-index: 9999; bottom: 100px; right: 10px; width: 50px; height: 20px; padding: 15px 10px 10px; background: #000; color: #fff; text-align: center; text-decoration: none; font-size: 20px; line-height: 20px; clear: both; opacity: .7; filter: alpha(opacity=70);
}
page-top:hover {
opacity: .8; filter: alpha(opacity=80);
}
.arrow {
position: absolute;
width: 15px;
height: 15px;
border: 2px solid #000;
border-left-color: #FFF;
border-top-color: #FFF;
top: 20px;
left: 25px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}