Question

Trying to make simple jQuery function to create a scrollToTop button that fades in as you scroll down.

$(document).ready(function() {
    var start = 300;
    var duration = 200;
    var scrolled;

    $('.scrollUp').css('opacity', '0.0');

    $(window).scroll(function(){ 

        var opacity = (scrolled - start) / duration;

        scrolled = $(window).scrollTop();

        if (0 < opacity < 1) {
            $('.scrollUp').css('display', 'block').css('opacity', opacity);
        } else if (1 < opacity) {
            $('.scrollUp').css('display', 'block').css('opacity', '1.0');
        } else {
            $('.scrollUp').css('display', 'none').css('opacity', '0.0');
        }
    });

    $('.scrollUp').click(function(){
        $('html, body').animate({
            scrollTop: 0
        }, 500);
    });
});

See it in action here: http://jsfiddle.net/JamesKyle/fBvGH/

Answer 1

This works, tested in jsfiddle:

$(document).ready(function() {
    var start = 300;
    var duration = 200;
    var scrolled;

    $('.scrollUp').css('opacity', '0.0');

    $(window).scroll(function(){ 

        var opacity = (scrolled - start) / duration;

        scrolled = $(window).scrollTop();

        if (0 < opacity < 1) {
            $('.scrollUp').css('display', 'block').css('opacity', opacity);
        } else if (1 < opacity) {
            $('.scrollUp').css('display', 'block').css('opacity', '1.0');
        } else {
            $('.scrollUp').css('display', 'none').css('opacity', '0.0');
        }
    });

    $('.scrollUp').click(function(){
        $('html,body').animate({
            scrollTop: 0
        }, 500);
    });
});

---

Update:

And here’s a working example with the opacity animation.
Looks like this guy was looking for the same equation.

Better to use some math in situation’s like this:

scrolled = $(window).scrollTop();
height = $('body').height();
height = Math.ceil((scrolled / height) * 100);
height = height / 100;

---

Second Update

Ok, you want it to start appearing after the dark blue section. Ok, so what you need to do is exclude that portion of the top before the gradient. You can do that by making an if clause that checks if the scrollTop value has hit the top part of the light blue gradient; around 300px from the top of the document.

Then instead of using the body height in the above equation, use the total height of the gradient section; about 210px. This value will replace the var height in the jQuery above. Let me know if you have issues implementing this. Didn’t notice you’re comment on the above answer.