[Jquery]ページ一定移動でスクロールボタン表示
よくあるあれだす。
【１】汎用
$(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;
});
});
【２】ちょっと専用
$(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;
});
});
【３】こちらのサイトさまの応用
スクロール完了（停止）の検出と、フローティングメニューの実装
$(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;
});
});