[jQuery]スクロールしたらページ下部からボタンをスライドイン表示

jQuery

2020.02.03

スクロールしたらページ下部から要素（.footer_button）をスライドイン表示
スクロールしたらページ下部からpagetopボタン（.pagetop）をスライドイン表示

スクロールしたらページ下部から要素（.footer_button）をスライドイン表示

$(function() {
    var showFlag = false;
    var topBtn = $('.footer_button');    
    topBtn.css('bottom', '-100px');
    var showFlag = false;
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            if (showFlag == false) {
                showFlag = true;
                topBtn.stop().animate({'bottom' : '26px'}, 200); 
            }
        } else {
            if (showFlag) {
                showFlag = false;
                topBtn.stop().animate({'bottom' : '-100px'}, 200); 
            }
        }
    });
});

$(function() {

var showFlag = false;

var topBtn = $('.footer_button');

topBtn.css('bottom', '-100px');

var showFlag = false;

$(window).scroll(function () {

if ($(this).scrollTop() > 100) {

if (showFlag == false) {

showFlag = true;

topBtn.stop().animate({'bottom' : '26px'}, 200);

}

} else {

if (showFlag) {

showFlag = false;

topBtn.stop().animate({'bottom' : '-100px'}, 200);

}

});

スクロールしたらページ下部からpagetopボタン（.pagetop）をスライドイン表示

$(function() {
    var showFlag = false;
    var topBtn = $('.pagetop');    
    topBtn.css('bottom', '-100px');
    var showFlag = false;
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            if (showFlag == false) {
                showFlag = true;
                topBtn.stop().animate({'bottom' : '26px'}, 200); 
            }
        } else {
            if (showFlag) {
                showFlag = false;
                topBtn.stop().animate({'bottom' : '-100px'}, 200); 
            }
        }
    });
    
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 750);
        return false;
    });
});