navigation - Jump to next section - Jquery -

navigation - Jump to next section - Jquery -

i'm working in horizontal layout, , trying utilize jquery when click in anchor, navigate in html sections. when click jump next section.

i see examples doing same vertically!

the html code:

<div id="main"> <div id="nav"> <a id="prev" class="prev"> prev </a> <a id="next" class="next"> next </a> </div> <div class="content-container"> <div class="content"> <section id="about" class="panel"> <p>about content</p> </section><!-- end --> <section id="event" class="panel"> <p>event content</p> </section><!-- end event --> <section id="services" class="panel"> <p>services content</p> </section><!-- end services --> </div><!-- end content --> </div><!-- end content-container --> </div><!-- end main -->

the js code

<script src="jquery-1.6.min.js"></script> <script type="text/javascript"> function scrolltoposition(element) { if (element !== undefined) { $("#main.content-container").scrollto(element, 700, { margin: true }); } } $(function() { var posts = $('.panel'); var position = 0; //start position var next = $('#next'); var prev = $('#prev').hide(); next.click(function(evt) { prev.show(); scrolltoposition(posts[position += 1]); if (position === posts.length - 1) { next.hide(); } }); prev.click(function(evt) { next.show(); scrolltoposition(posts[position -= 1]); if (position === 0) { prev.hide(); } }); }); </script>

what doing wrong?

you using method scrollto not jquery method , rather plugin method. haven't included plugins code throw errors in browser console , nothing.

include plugin file after load jquery.js , before code.

otherwise hard tell other problems might have without seeing css @ work.

jquery navigation scroll