JQuery: scroll down the page with the set step (in pixels) when clicked?

Question

I am trying to scroll down a page 150 pixels from the current position when I click on an item. So let's say you were about halfway through the page. You click this link and it will move you 150 pixels.

Is this possible with jQuery?

I am looking at scrollTop and the scrollTo plugin, but I cannot connect the dots.

Answer 1

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

Answer 2

Just check this out:

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

This will cause the scroller to scroll from its current position when your item is clicked

And 150px is used to scroll down to 150px

Answer 3

You can do this with animate , as shown in the following link:

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

If you want to do this with the scrollTo plugin, look at the following:

How to scroll a window using jQuery $ .scrollTo () function

Answer 4

Perhaps you can follow that the scrollTo plugin from Ariel Flesler really works.

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

Answer 5

An updated version of the HCD solution that avoids conflicts:

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