Scrolling down to next element via keypress & scrollTo plugin - jQuery
- by lyrae
I am using jQuery's scrollTo plugin to scroll up and down my page, using UP arrow and DOWN arrow.
i have a bunch of div with class "screen", as so: <div class="screen-wrapper">...</div>
What I am trying to do is, when i press UP or DOWN, the window scrolls to the next, or previous div with class of "screen".
I have the keypresses taken care of.
According to the plugin docs, to scroll a window, you use $.scrollTo(...);
Here's the code I have:
$(document).keypress(function(e){
switch (e.keyCode) {
case 40: // down
n = $('.screen-wrapper').next()
$.scrollTo( n, 800 );
break;
case 38: // up
break;
case 37: // left
break;
case 39: // right
break;
}
});
And if it helps, here's the HTML div. I have a few of these on the page, and essentially, am trying to scroll to next one by pressing down arrow:
<div class='screen-wrapper'>
<div class='screen'>
<div class="sections">
<ul>
<li><img src="images/portfolio/sushii-1.png " /></li>
<li><img src="images/portfolio/sushii-2.png" /></li>
<li><img src="images/portfolio/sushii-3.png" /></li>
</ul>
</div>
<div class="next"></div>
<div class="prev"></div>
</div>
And also if it needed, I can provide a link where this is being used if it'll help someone get a better idea.
edit
And, i forgot to mention what the real question here is.
The question/problem is that it won't scroll down past the first element, as seth mentioned.
