Lightweight scrollUp function - jQuery

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/

score 3 · Accepted Answer · edited May 23 '17 at 12:01

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. jsFiddle diagram

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.

The gradient on the body element? Are you trying to fade that also? If so, in what manner? — k4t434sis, Nov 23 '11 at 22:45
yeah i managed to figure it out on my own, turns out I used incorrect formatting for the math — James Kyle, Nov 24 '11 at 03:31
Yeah, it works the first time, but scroll up and down a couple times. The fade starts occurring at different offsets from the top. Might want to try some sort of reset mechanism to zero out the opacity level when the user scrolls back up. Just a suggestion ;] — k4t434sis, Nov 24 '11 at 03:39

score 1 · Answer 2 · answered Nov 23 '11 at 22:12

1

scrollTop is not a window property, so just change you code slightly: $(window).animate({scrollTop : 0},500);

to

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

here's the updated jsfiddle: http://jsfiddle.net/fBvGH/13/

answered Nov 23 '11 at 22:12

Sal

1,657
12
9

Thank you I didn't realize that but other than that its not fading in the way I would expect it to. – James Kyle Nov 23 '11 at 22:14
thats not what I meant, its supposed to start fading in after 300 pixels and finish when it reaches 500 – James Kyle Nov 23 '11 at 22:18

Lightweight scrollUp function - jQuery

2 Answers2

Update:

Second Update