ページトップへJqueryで動くリンク

Jqueryを使って画面の右下に常に表示されスクロールしても動くヤツ。

CSS
#return_top { position:fixed; right:5px; bottom:10px; }
#return_top img { opacity:0.6; display:block; }
#return_top:hover img { opacity:1; }

HTML
(ヘッダ部)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
(BODY下の方)
<a id="return_top" href="#header"><img src="http://livedoor.blogimg.jp/hadakafeti/imgs/0/8/0872ba51.png"
alt="ページ上部へ戻る" title="ページ上部へ戻る" /></a>

JavaScript
jQuery(document).ready(function($) {
$(function(){
var topBtn = $('#return_top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
});