jquery - 如何使 div 仅在向下滚动时淡入？

Question

我创建了一个滚动到顶部的功能，让访问者在单击按钮时滚动到顶部。效果很好。我还使按钮出现在滚动上。

我需要的是向下滚动时出现，滚动到顶部时消失。但目前，它首先出现在页面加载时，然后淡出，然后再次淡入。如何才能使其仅在页面向下滚动时出现？

这是 html:

<div>
   <p> The page's content</p>
   <div class="scrolltop">    
       <a href="#top" id="scrolltop">Top</a>
   </div>
</div>

这是jquery:

<script>
  jQuery("a[href='#top']").click(function() {
     jQuery("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});
</script>
    <script>
jQuery(window).scroll(function() {

    if (jQuery(this).scrollTop()> 200)
     {
        jQuery('.scrolltop').fadeIn();
     }
    else
     {
      jQuery('.scrolltop').fadeOut();
     }
 });
    </script>

这是CSS:

#scrolltop {
    background-color: orange !important;
    color:#FFF;
    color:rgba(255, 255, 255, 0.7);
    font-size:12px;
    border-radius: 2px;
    border: 0;
    outline: 0;
    right: 0;
    bottom: 50px;
    height: 50px;
    position: fixed;
    z-index:9999;
}

#scrolltop:hover {
    opacity: 1.0;
}

这是我的-fiddle为了方便

Answer 1

jsFiddle Demo

非常简单的修复，只需在加载时隐藏滚动条即可。

jQuery('.scrolltop').hide();

另一种方法是执行 hide 内部执行的操作，并简单地将此类设置为根据定义隐藏 ( jsFiddle Demo )

.scrolltop{
 display: none;
}