jquery - Smooth Scroll with Arrows -

right have smooth scrolling anchors using jquery , easing attribute. want able scroll each section arrow keys. how can achieve this?

html

<ul class="desktop">      <li><a href="#aboutus">about </a></li>      <li><a href="#branding">branding &amp; identity</a></li>      <li><a href="#sponsorship">cause marketing</a></li>      <li><a href="#promotion">event management</a></li> </ul>     <div class="main-container" id="aboutus"></div> <div class="main-container2" id="branding"></div> <div class="main-container3" id="sponsorship"></div> <div class="main-container4" id="promotion"></div> 

javascript

<script src="js/jquery.easing.1.3.js"></script> <script> $(function() { $('a').bind('click',function(event){     var $anchor = $(this);      $('html, body').stop().animate({         scrolltop: $($anchor.attr('href')).offset().top     }, 1500,'easeinoutexpo');     /*     if don't want use easing effects:     $('html, body').stop().animate({         scrolltop: $($anchor.attr('href')).offset().top     }, 1000);     */     event.preventdefault(); }); }); </script> 

take fiddle : http://jsfiddle.net/t53fa/26/

it prototype, there's lot of amelioration do, logic here.

i save number of page in var , wich page on.

var lengthdiv = $('.desktop').find('li').length; var current = 0; 

then added 1 line in click function :

current = $anchor.parent().index(); 

this change current page number.

i made function on keydown preventdefault() prevent little scroll before animation , insert function :

$(document).keydown(function(e){e.preventdefault()}) $(document).keyup(function(e){     var key = e.keycode;     if(key == 38 && current > 0){         $('.desktop').children('li').eq(current - 1).children('a').trigger('click')     }else if(key == 40 && current < lengthdiv){         $('.desktop').children('li').eq(current + 1).children('a').trigger('click')     } }) 

i summary, check wich key pressed (well understand) , simulate click on page.

remember, it's prototype need work. can tell bug already, when scroll in page, doesn't change current var, i'm sure can figure out way ;)