スクロールしたら右端に出てくるページ上までビューンと連れてってくれるボタン(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>
あとは適正調整って感じ。