[jquery] 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.

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

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

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

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

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:

How to scroll the window using JQuery $.scrollTo() function

Updated version of HCD's solution which avoids conflict:

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

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);
}