2014-02-11 191 views
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); 
     }); 
    }); 
+0

這是怎麼回事? –

回答

0

退房http://jsfiddle.net/SVBVs/

已刪除負面的定位,不知道你爲什麼會想要做到這一點!

除此之外,你過得很好......

scrollTop.on('click',function() { 
    $('html, body').animate({ 
     scrollTop: 0 
    }, 500); 
}); 
+0

我想要消極的位置,所以它從視口中隱藏。問題在於它沒有出現在視口中... –