divからクラスを削除するときにアニメーションを適用する

Question

.upperクラスを＃top-btnに適用する次のコードがあります。ユーザーが特定の量だけスクロールダウンしてスクロールバックすると、ページの下部から＃top-btnをアニメートします。

しかし、スクロールアップ中にクラスが削除されると、元に戻すことができます。私はそれを持っている方法は、（クラスの上部が削除されているので）ちょうど離れて点滅します。

jQuery(document).ready(function($){ 
 

 
    // adjust this number to select when your button appears on scroll-down 
 
    var offset = 300, 
 
    scroll_top_duration = 3000, 
 

 
    // bind with the button link 
 
    $animation = $('#top-btn'); 
 

 
    // apply animation 
 
\t $(window).scroll(function(){ 
 
    \t ($(this).scrollTop() > offset) ? $animation.addClass('upper') : 
 
    \t $animation.removeClass('upper'); 
 
\t }); 
 
    });

body,html{ 
 
    width:100%; 
 
    position:relative; 
 
    height:100%; 
 
    } 
 
    body{ 
 
    background-color:green; 
 
    height:4000px; 
 
    } 
 
    #top-btn { 
 
    position: fixed; 
 
    z-index: 999; 
 
    padding: 0; margin: 0; 
 
    bottom: -100px; right: 0; 
 
    } 
 

 
    #top-btn.upper { 
 
\t bottom: 0; 
 
\t -webkit-transition: bottom 0.35s ease; 
 
\t -moz-transition: bottom 0.35s ease; 
 
\t -ms-transition: bottom 0.35s ease; 
 
\t -o-transition: bottom 0.35s ease; 
 
\t transition: bottom 0.35s ease; 
 
    } 
 

 
    #top-btn-BG { 
 
    display: block; 
 
    position: relative; 
 
    z-index: 950; 
 
    border-width: 0 0 100px 100px; 
 
    border-color: transparent transparent #fff transparent; 
 
    border-style: solid; 
 
    right: 0; bottom: 0; 
 
    width: 0; height: 0; 
 
    -webkit-transform:rotate(360deg); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="top-btn">Button</button>

Answer 1

代わりの.upperを取り除くあなたはbottom:-30px;を持つことになり、クラス.lowerを追加する必要があります。ボタンの高さがわからない場合は、jqueryから設定することができます。

次に、あなたのjqueryのは次のようになります：

($(this).scrollTop() > offset) ? 
$animation.addClass('upper').removeClass("lower"): 
$animation.addClass('lower').removeClass("upper"); 

jQuery(document).ready(function($){ 
 

 
// adjust this number to select when your button appears on scroll-down 
 
var offset = 300, 
 
scroll_top_duration = 3000, 
 

 
// bind with the button link 
 
$animation = $('#top-btn'); 
 

 
// apply animation 
 
$(window).scroll(function(){ 
 
    ($(this).scrollTop() > offset) ?  $animation.addClass('upper').removeClass("lower"): 
 
    $animation.addClass('lower').removeClass("upper"); 
 
    }); 
 
});

body,html{ 
 
width:100%; 
 
position:relative; 
 
height:100%; 
 
} 
 
body{ 
 
background-color:green; 
 
height:4000px; 
 
} 
 
#top-btn { 
 
position: fixed; 
 
z-index: 999; 
 
padding: 0; margin: 0; 
 
bottom: -100px; right: 0; 
 
} 
 

 
#top-btn.upper { 
 
bottom: 0; 
 
-webkit-transition: bottom 0.35s ease; 
 
-moz-transition: bottom 0.35s ease; 
 
-ms-transition: bottom 0.35s ease; 
 
-o-transition: bottom 0.35s ease; 
 
transition: bottom 0.35s ease; 
 
} 
 
#top-btn.lower { 
 
bottom:-30px; 
 
-webkit-transition: bottom 0.35s ease; 
 
-moz-transition: bottom 0.35s ease; 
 
-ms-transition: bottom 0.35s ease; 
 
-o-transition: bottom 0.35s ease; 
 
transition: bottom 0.35s ease; 
 
} 
 

 
#top-btn-BG { 
 
display: block; 
 
position: relative; 
 
z-index: 950; 
 
border-width: 0 0 100px 100px; 
 
border-color: transparent transparent #fff transparent; 
 
border-style: solid; 
 
right: 0; bottom: 0; 
 
width: 0; height: 0; 
 
-webkit-transform:rotate(360deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="top-btn">Button</button>

Answer 2

あなたは、クラスを除去するための条件演算子で関数を呼び出し、ページを下にスクロールすることができます。このような何か：

($(this).scrollTop() > offset) ? $animation.addClass('upper') : 
    scrollDown(); 

    function scrollDown(){ 
     $('#top-btn').removeClass('upper'); 
     //here goes the code to scroll down//; 
    }