右下に ”ページトップへ戻る” みたいなパーツがありますね。
ながーーーーーーーい画面になった時に自分でスクロールするのがめんどいので
ページトップボタンみたいに横に表示してみようかなってやつです。
スティッキーメニューというらしい
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
$(function () { var btn = $('.sticky'); btn.hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 300) { btn.fadeIn(); } else { btn.fadeOut(); } }); //スクロールしてトップ btn.click(function () { var btn = btn; var id = $(this).attr("id"); switch (id) { case "sticky1": id = "#doc1"; break; case "sticky2": id = "#doc2"; break; case "sticky3": id = "#doc3"; break; case "sticky4": id = "#doc4"; break; 略 } $('body,html').animate({ scrollTop: $(id).offset().top }, 500); return false; }); }); |
idを判定して、そのidのところまでスクロールして戻ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#sticky1 { position: fixed; top: 380px; right: 10px; font-size: 90%; background: rgb(218, 36, 12); } 略 .sticky { text-decoration: none; color: #fff; width: 50px; padding: 8px 0; text-align: center; display: block; border-radius: 5px; } .sticky:hover { text-decoration: none; background: rgb(114, 96, 96); } |
こんな感じで右下にちょろっと表示させてあげます。
|
1 |
<p class="sticky" id="sticky1">サンプル</p> |
最後にこんな感じのタグをどっかにかいてあげれば完成です
