2014-02-11 110 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

我想要消极的位置,所以它从视口中隐藏。问题在于它没有出现在视口中... –