Question

normally I use this on some of my projects.

    //Back to top
    $(window).scroll(function () {

            if ( $(window).scrollTop() > 100 ) {
                $('#back-to-top').fadeIn('fast');
            } else {
                $('#back-to-top').fadeOut('fast');
            }

    });

    $(window).scroll();

This means whenever a user scrolls more like a 100px down from the top a back-to-top arrow is fading in.

This time I have a horizontal scrollbar inside a div that has it’s overlow-x set to auto. Looks like this…

<section id="slider" class="horizontal">
    <!-- Some Images that are floated left -->
    <div id="back-to-left"></div>
</section>

.horizontal {
    overflow-x: auto;
    white-space: nowrap;
    padding: 20px 0;
}

So it’s just a div with a lot of images side by side and a horizontal scrollbar at the bottom of this div.

I only want to show this #back-to-left button when I scroll inside of this div over a certain value – maybe again like 100px.

How can I do that in this case?

Thank you for your help.

Answer 1

You can use scrollLeft() to determin the position

So you would want to do something like

$('#slider').scrollLeft() > 100