jQuery「ページトップへ戻るボタン」の作成方法

jQuery「ページトップへ戻るボタン」の作成方法

とても簡単です。

--------------------------------------------------

■HTML

<a id="pageTop" href="#contents">ページトップへ</a>

--------------------------------------------------

■CSS

#pageTop{
background:#DDD;
border-radius:5px;
color:#FFF;
padding:20px;
position:fixed;
bottom:20px;
right:20px;
}
#pageTop:hover{
background:#EEE;
}

--------------------------------------------------

■JavaScript

<script type="text/javascript">
$(function() {
var topBtn = $('#pageTop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
    topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 1000);
return false;
    });
});
</script>

--------------------------------------------------

■備考

scrollに書いてある100は、画面の上部から100スクロールするとボタンを表示するという記述。
animateに書かれている1000は、1000（1秒）かけてページトップに戻るという記述。

--------------------------------------------------