jQuery fadeOut won't fade on Tumblr - it simply disappears

Question

I have installed an infinite scroll script to my Tumblr blog, and am now in the process of adding a scroll-to-top button. I want this button to fade in once the user scrolls down past a certain point, and fade out when they scroll back up. I also want it to provide a smooth scroll, not just a jump to the top.

I am fluent with HTML and CSS, though I unfortunately know basically nothing about JavaScript and jQuery. I found this tutorial for the JS side of things which taught me how to get the desired scroll button. Everything worked great, but the only problem is that the fadeOut doesn't work - the element simply disappears. Sometimes, if I am lucky, it will start fading out a little for a microsecond or so, but then disappear.

Here is the JavaScript I'm using:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

<script>
$(function () {
    $("#gotop")
        .hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 400) {
            $('#gotop').fadeIn(500);
        } else {
            $('#gotop').fadeOut(500);
        }
    });
    $('#gotop').click(function () {
    $('html,body').animate({
        scrollTop: 0
    }, 400);
    return false;
  });
});
</script>

I have a simple anchor element in my HTML, styled in CSS using the id #gotop:

<a href="#top" id="gotop">Top</a>

CSS:

#gotop {position: fixed;
    right: 2em; bottom: 2em;}

As it is, everything works fine, except for the fade out.

I've browsed the internet for similar such issues. I tried various things which I came across, though most of it was greek to me unfortunately.

Edit: I just had a thought. Is it possible that the fade out doesn't occur, because before it has time to fade out, the page has already scrolled back above the "hidden" zone and the element is immediately set to be hidden?

If anybody knows anything, it'd be much appreciated - thanks for your time!

Answer 1

Hope this helps

Js Fiddle Demo

$(function () {
 $('#gotop').hide();
$(window).scroll(function () {

        if ($(this).scrollTop() > 400) {
            $('#gotop').fadeIn(500);
        } else {
            $('#gotop').fadeOut(500);
        }
    });
    $('#gotop').click(function () {
    $('html,body').animate({
        scrollTop: 0
    }, 400);
    return false;
  });
     });

Answer 2

Okay, after some mucking around I managed to figure out the problem.

It turns out that I had set all elements on my page to have a CSS3 transition assigned to them, through use of the * selector:

* {margin: 0; padding: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;}

I did this for convenience so that any hover I had would have a nice transition. However, it seems that this was what was causing my scroll-to-top button to misfunction!

I would suggest that anybody who is having the same problem as my checks any transitions they've used, and ensure that they're not affecting the to-top button. If there are any doubts, try removing them temporarily just to check.

Hope this helps.