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

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.

var y = $(window).scrollTop();  //your current y position on the page
$(window).scrollTop(y+150);

Just check this:

$(document).ready(function() {
    $(".scroll").click(function(event){
        $('html, body').animate({scrollTop: '+=150px'}, 800);
    });
});

It will make scroller scroll from current position when your element is clicked

And 150px is used to scroll for 150px downwards

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:

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

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

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

Pure js solution for newcomers or anyone else.

var scrollAmount = 150;
var element = document.getElementById("elem");

element.addEventListener("click", scrollPage);

function scrollPage() {
    var currentPositionOfPage = window.scrollY;
    window.scrollTo(0, currentPositionOfPage + scrollAmount);
}

Updated version of HCD's solution which avoids conflict:

var y = $j(window).scrollTop(); 
$j("html, body").animate({ scrollTop: y + $j(window).height() }, 600);