jquery - How to scroll xx pixels or % at once -

i building website , want customize scrolling. if user scrolls want them scroll down 100% @ once in website: http://onlinedepartment.nl/

edit: managed smooth scrolling anchor points. want work on mousescroll too

any ideas? in advance

that website pretty nice. there's kind of alot of stuff keep in mind this. here's demo of things describe below (fiddle).

1. every "page's" height high window.innerheight - /* height of menu */

2. every time scroll you'll have check if scroll upwards or downwards you can updating variable on every scroll event window.pageyoffset value , check if new value higher or lower this, if it's higher you're scrolling downwards. if event.originalevent.wheeldeltay > 0 you're scrolling upwards. event scroll event.

3. then on every down(up)scroll you'll want scroll 1 page's height down or up. can have variable save page you're on or can see how many pages current window.pageyoffset corresponds to. scroll $('body').animate({scrolltop: /*page height*/ * /* page number - 1 (to 0 based) */})

4. then you'll not want scroll more 1 page every time use scrollwheel. set e.g. blocked variable true (blocked = true) when scroll , after timeout reset false settimeout(function() { blocked = false; }) , every time scroll check if variable blocked === false , scrolling otherwise nothing event.preventdefault() in function bound scroll event.

there's more stuff consider but...

you know attach event handler scroll event: $(document).on('scroll', function() { /*the code should run on scroll event */})

edit: had bind mousewheel event instead of scroll event able prevent page scrolling event.preventdefault() inside function listening event.

edit2: here's demo http://codepen.io/hatlen/pen/stubk. 1 thing did not work codepen window.innerheight not correct div's heights not same real window.innerheight.

edit3: instead of saving window.pageyoffset , comparing new offset direction scroll event event.originalevent.wheeldeltay