スクロールしたら右端に出てくるページ上までビューンと連れてってくれるボタン（PageTopボタンと呼びます）をフッターの上でピタッと止める方法。
1 | $(function(){ |
2 | $(".page-top").hide(); |
3 | $(window).on("scroll", function() { |
4 | if ($(this).scrollTop() > 100) { |
5 | $(".page-top").fadeIn("fast"); |
6 | } else { |
7 | $(".page-top").fadeOut("fast"); |
8 | } |
9 | scrollHeight = $(document).height(); |
10 | scrollPosition = $(window).height() + $(window).scrollTop(); |
11 | footHeight = $("footer").innerHeight(); |
12 | if ( scrollHeight - scrollPosition <= footHeight ) { |
13 | $(".page-top").css({ |
14 | "position":"absolute", |
15 | "bottom": footHeight + 1 |
16 | }); |
17 | } else { |
18 | $(".page-top").css({ |
19 | "position":"fixed", |
20 | "bottom": "0" |
21 | }); |
22 | } |
23 | }); |
24 | $('.page-top').click(function () { |
25 | $('body,html').animate({ |
26 | scrollTop: 0 |
27 | }, 400); |
28 | return false; |
29 | }); |
30 | }); |
肝の部分はPageTopアイコンの基準点を設けるためにfooterに「position:relative」
1 | footer { |
2 | position: relative; |
3 | } |
そして、＜footer＞の中にPageTopアイコンを入れる。
1 | <footer> |
2 | フッター |
3 | <p class="page-top"><a href="#">▲</a></p> |
4 | </footer> |
あとは適正調整って感じ。