CODEWITHSUNDEEP
jquerynavigationscroll
Mysteriis
Mysteriis

Reputation: 39

Jump to next section - Jquery

I'm working in a horizontal layout, and trying use jquery to when click in an anchor, navigate in html sections. So when click jump to the next section.

I see some examples doing the same but 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 about -->

            <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 i doing wrong?

Upvotes: 0

Views: 665

Answers (1)

charlietfl
charlietfl

Reputation: 171698

You are using a method scrollTo which is not a jQuery method , but rather a plugin method. You haven't included any plugins so code will throw errors in browser console and do nothing.

Include the plugin file after you load jQuery.js and before your code.

Otherwise it is hard to tell what other problems you might have without seeing your css at work.

Upvotes: 1

Related Questions