Question

我创建了一个滚动到顶部的功能，让访问者在点击按钮时滚动到顶部。这很好。我也让按钮显示在滚动上。

我需要的是向下滚动时显示，滚动到顶部时消失。但是目前，它首先出现在页面加载然后fadeOut和fadeIn。如何仅在页面向下滚动时才显示该内容？

这是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;
}

为方便起见，这是my- fiddle

Answer 1

的 jsFiddle Demo 的

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

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

另一种方法是在内部执行hide所做的事情，并根据定义简单地设置此类隐藏（jsFiddle Demo）

.scrolltop{ display: none; }

Answer 2

将此添加到您的css

.scrolltop {
    display:none;
}

所以它最初是隐藏的而不必等待你的代码，远比使用js

更好

Answer 3

尝试添加此行：

jQuery(document).ready(function() { jQuery('.scrolltop').hide() } );

Fiddle

如何才能在向下滚动时使div淡出？

3 个答案: