Question

I’m trying to add a Scroll to Top button at the bottom of a div that is set to overflow:auto. It will be used for a section of a site that uses ajax to call content (of varying lengths) into the div.

The functionality I would like:
As a user scrolls within the div, the button fades into view (much like this tutorial: http://www.mattvarone.com/web-design/uitotop-jquery-plugin/). I have found great tutorials that offer this fade-in function but only in relation to the length of the whole page, not an individual, scrolling div. This is where I am having trouble.

I was able to create a stationary button within a scrolling div. I am very new to coding and couldn’t figure out how to create the fade-in effect that is triggered as a user scrolls within the div. See my sample attempt here: http://jsfiddle.net/in_excess/eEHbW/5/

If anyone could offer some help it would be much appreciated. Even just a link to a site/tutorial that does what I am describing. I’ve been googling this for days and can’t find quite what I need. Thanks!

Answer 1

You need to calculate the opacity based on the div’s scrollable area:

$('#content').scroll(function() {
    var total = $(this)[0].scrollHeight - $(this).height();
    var opacity = $(this).scrollTop() / total;
    $('#backtotop').css('opacity', opacity);
});

As you scroll further from top, the scroll back button gets more opaque.

Here’s the updated fiddle: http://jsfiddle.net/adrianonantua/eEHbW/9/