サイトを設置する時必ず設置するページ上部に戻るスムーススクロールの記事を書いていなかったので書いておきます。
HTML
<div id="page-top">
<a href="#top">PAGETOP</a>
</div>
たとえばこんな簡単なソースがあったとしたら、
Javascript
$(function(){
// TOPに戻るボタン
var topBtn = $('#page-top');
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
var w = $(window).width();
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スムーススクロールでページトップへ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
CSS
#page-top{
position: fixed;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
}
#page-top a{
border-radius: 50%;
background: #006e9f;
color: #fff;
line-height: 50px;
text-decoration: none;
}
こんな感じです。
画面遷移後すぐには表示されませんが、画面をスクロールすると画面右下にふわっと表示されます。
