スクロールしたら右端に出てくるページ上までビューンと連れてってくれるボタン(PageTopボタンと呼びます)をフッターの上でピタッと止める方法。
$(function(){
$(".page-top").hide();
$(window).on("scroll", function() {
if ($(this).scrollTop() > 100) {
$(".page-top").fadeIn("fast");
} else {
$(".page-top").fadeOut("fast");
}
scrollHeight = $(document).height();
scrollPosition = $(window).height() + $(window).scrollTop();
footHeight = $("footer").innerHeight();
if ( scrollHeight - scrollPosition <= footHeight ) {
$(".page-top").css({
"position":"absolute",
"bottom": footHeight + 1
});
} else {
$(".page-top").css({
"position":"fixed",
"bottom": "0"
});
}
});
$('.page-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
肝の部分はPageTopアイコンの基準点を設けるためにfooterに「position:relative」
footer {
position: relative;
}
そして、<footer>の中にPageTopアイコンを入れる。
<footer> フッター <p class="page-top"><a href="#">▲</a></p> </footer>
あとは適正調整って感じ。