スムーススクロール
#pageTop {
position: fixed;
bottom: 20px;
z-index: 10000;
right: 20px;
font-size: 77%;
a{
display: block;
width: 60px;
padding: 30px 0;
color: #fff;
background: rgba(100, 100, 100, 0.8);
border-radius: 5px;
text-decoration: none;
text-align: center;
&:hover{
text-decoration: none;
background: rgba(100, 100, 100, 0.6);
}
}
}
<p id="pageTop"><a href="#wrap">∧</a></p>
jQuery( function() {
var topBtn = $('#pageTop');
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
} );