【js】ページTOPボタン実装（一定量スクロール）【DEMO】

ホーム » N-PLUS 全記事一覧 » DEMO » 【js】ページTOPボタン実装（一定量スクロール）【DEMO】

【js】ページTOPボタン実装（一定量スクロール）【DEMO】

JQuery・JS／DEMO

■JS CODE

// JQuery 1.9.1ver:最新ライブラリで動くか不明
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
var topBtn = $('#page-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;
});
});
</script>

■HTML CODE

<p id="page-top"><a href="#">TOP</a></p>

■CSS CODE

#page-top {
position: fixed;
bottom: 20px;
right: 20px;
}