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);
});
});
這是怎麼回事? –