[Jquery]ページ一定移動でスクロールボタン表示
よくあるあれだす。
【1】汎用
$(window).load(function() { $(window).scroll(function () { var s = $(this).scrollTop(); var m = 200; if(s > m) { $("#pagetop").fadeIn('3000'); } else if(50 > m) { }else { $("#pagetop").fadeOut('3000'); } }); $("#pagetop").click(function () { $('html,body').animate({ scrollTop: 0 }, '300'); return false; }); });
【2】ちょっと専用
$(window).load(function() { var scount = 0; $(window).on("scroll touchmove", function(){ var s = $(this).scrollTop(); var m = 300; if(s > m) { if(scount == 0) { $("#pagetop").fadeTo("1000", 0.5); $("#pagetop").delay("2000").fadeTo("1000", 1); scount = 1; }else { $("#pagetop").fadeTo("1000", 1); } }else { $("#pagetop").stop().fadeOut(); } }); $("#pagetop").click(function () { $("#pagetop").stop().fadeOut(); $('html,body').animate({ scrollTop: 0 }, '300'); return false; }); });
【3】こちらのサイトさまの応用
スクロール完了(停止)の検出と、フローティングメニューの実装
$(function () { var $target = $("#pagetop"), $window = $(window), $document = $(document), timerId, defaultPos = $target.offset().top, targetHeight = $target.outerHeight(true), containerHeight = $target.parent().height(), DURATION = 500; function floatingMenu(scrollTop) { $("#pagetop").fadeTo("3000", 1); } if (!$target.length) { return; } $window.bind("scrollFinish", function (event, scrollTop) { floatingMenu(scrollTop); }); $window.bind("scroll", function () { var scrollTop = $document.scrollTop(); var m = 300; if(scrollTop > m) { $("#pagetop").css("opacity", 0.5).fadeIn(); }else { $("#pagetop").stop().fadeOut(); } if (timerId) { clearTimeout(timerId); } timerId = setTimeout(function () { timerId = null; if(scrollTop > m) { $window.trigger("scrollFinish", [scrollTop]); } }, 1000); }); $window.unload(function () { $window.unbind("scroll scrollFinish"); }); $("#pagetop").click(function () { $('html,body').animate({ scrollTop: 0 }, '300'); return false; }); });