CODEWITHSUNDEEP
jqueryscrollscrolltop
Netizen
Netizen

Reputation: 79

How can I make a div fadeIn only on scrolling down?

I have created a scroll-to-top function to let visitors scroll-to-top on clicking a button. That works fine. I have also made the button to appear on scroll.

What I needed is to appear when scrolled down and disappear when scrolled to top. But currently, it first appears on page load then fadeOut and again fadeIn. How can I make that appear only when the page is scrolled down?

Here is the html:

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

Here is 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>

Here is the 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;
}

Here is my- fiddle for convenience

Upvotes: 2

Views: 1492

Answers (3)

Travis J
Travis J

Reputation: 82267

jsFiddle Demo

Pretty simple fix, just hide your scroller on load.

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

An alternative would be to do what hide does internally, and simply set this class to hide by definition (jsFiddle Demo)

.scrolltop{
 display: none;
}

Upvotes: 3

Selman Gen&#231;
Selman Gen&#231;

Reputation: 101681

Try to add this line:

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

Fiddle

Upvotes: 1

john Smith
john Smith

Reputation: 17906

add this to your css 

.scrolltop {
    display:none;
}

So its initially hidden and doesn´t have to wait for your code, far better than doing that with js

Upvotes: 2

Related Questions