0
我刚刚创建了一个按钮来显示一个按钮滚动到顶部,但它实际上不工作。我加倍检查,一切似乎没问题。我也加倍检查和jQuery加载。哪里不对?滚动到顶部不显示与.animate
HTML:
<div class="scroll-to-top-button js-scroll-to-top">
<span>scroll to top</span>
</div>
SASS:
.scroll-to-top-button{
width: 65px;
height: 60px;
background: $main-black;
color: $main-white;
border: 1px solid $main-black;
text-transform: uppercase;
position: fixed;
bottom: -200px;
right: 50px;
z-index: 5;
transition: all 0.2s ease;
&:hover{
background: $main-white;
color: $main-black;
border: 1px solid $main-black;
}
span{
width: 80%;
margin: 13px auto 0 auto;
display: block;
font-size: 12px;
text-align: center;
cursor: pointer;
}
}
JS:
var jqWindow = $('window');
var scrollTop = $('.js-scroll-to-top');
function scrollToTopButtonDisplay(){
if(jqWindow.scrollTop() > 100){
scrollTop.animate({
bottom: '0'
}, 500);
}
else{
scrollTop.animate({
bottom: '-200px'
}, 500);
}
}
// scroll to top button
jqWindow.on('scroll',function() {
scrollToTopButtonDisplay();
});
scrollTop.on('click',function() {
$('html, body').animate({
scrollTop: 0
}, 500, function() {
scrollTop.animate({
bottom: '-200px'
}, 500);
});
});
这是怎么回事? –