Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗? Update the question,所以它是on-topic,用于堆栈溢出。
                        
                        2年前关闭。
                                                                                            
                
        
我有以下将.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
	$(window).scroll(function(){
    	( $(this).scrollTop() > offset ) ? $animation.addClass('upper') :
    	$animation.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-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>

最佳答案

而不是删除.upper,您应该添加一个具有.lower的类bottom:-30px;。如果您不知道按钮的高度,则可以通过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>

10-07 19:56
查看更多