jQuery: Scroll down page a set increment (in pixels) on click?

Question

I'm trying to make a page scroll down 150px from the current position when an element is clicked. So lets say you're roughly halfway scrolled down a page. You click this link, and it will slide you down an additional 150 pixels.

Is this possible with jQuery?

I've been looking at scrollTop and the scrollTo plugin, but I can't seem to connect the dots.

Answer 1

You can do that using animate like in the following link:

http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery

If you want to do it using scrollTo plugin, then take a look the following:

http://stackoverflow.com/questions/832860/how-to-scroll-the-window-using-jquery-scrollto-function

Answer 2

This article discusses the compatibility issues involved with Window size and scrolling in the major browsers. More importantly, the author provides a nice getScrollXY() function that returns the current scroll position:

http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

The nice thing is that based on getScrollXY, you can create a setScrollXY() function that sets the appropriate value to scroll the page based on your browser.

For IE6, this value is document.documentElement.scrollTop. In a simple test, I was able scroll a page by setting this value. Here is an untested guess at what the set function might look like:

    function setScrollXY(x, y) {
       if( typeof( window.pageYOffset ) == 'number' ) {
           //Netscape compliant
           window.pageYOffset = y;
           window.pageXOffset = x;
       } else if( document.body && ( document.body.scrollLeft || 
                  document.body.scrollTop ) ) {
           //DOM compliant
           document.body.scrollTop = y;
           document.body.scrollLeft = x;
       } else if( document.documentElement && ( document.documentElement.scrollLeft ||
                  document.documentElement.scrollTop ) ) {
           //IE6 standards compliant mode
           document.documentElement.scrollTop = y;
           document.documentElement.scrollLeft = x;
       }
    }

In your click events, you can then use getScrollXY to find the current position, then use your set function to add 150 to the appropriate Y.

If it works, all credit to Mark "Tarquin" Wilton-Jones for the great article. If not, I probably fudged it up. ;-)

---

Response to comment:

Use the functions from the article and the setScrollXY I posted above. Then create a new function to handle your click events:

function scrollOnClick(vAmount) // amount to scroll vertically in pixels.
{
    var currentPos = getScrollXY();
    setScrollXY(currentPos[0], currentPos[1] + vAmount);
}

Now, in your elements you call scrollOnClick and then return false if necessary to prevent other processing. Here's an example using an anchor tag using the 150 pixel increment you mentioned as the vAmount parameter:

<a href="#" onclick="scrollOnClick(150); return false;" >More...</a>

A better way is to apply a class to all of your links:

<a href="#" class="scroller">More...</a>

Then you can add the click registrations dynamically using jQuery:

<script type="text/javascript">
$(document).ready(function() {
    $(".scroller").click(function() {
        scrollOnClick(150); 
        return false;
    });
});
</script>

Well, that should do it.

Answer 3

You might be after something that the scrollTo plugin from Ariel Flesler does really well.

http://demos.flesler.com/jquery/scrollTo/