Scrolling prev/next section

Creating previous/next section links depends on your markup and page layout.

Assuming your markup is the following:

<div id="section-1">
    <!-- your content -->
    <a href="#" rel="next">Next</a>
</div>
<div id="section-2">
    <!-- your content -->
    <a href="#" rel="previous">Previous</a>
    <a href="#" rel="next">Next</a>
</div>
<div id="section-3">
    <!-- your content -->
    <a href="#" rel="previous">Previous</a>
</div>

Then, you could create a script like the following and place it in your theme’s footer.php:

<script>
    (function($){
        $(window).load(function(){
            $("a[rel='next']").click(function(e){
                e.preventDefault();
                var to=$(this).parent().next().attr("id");
                $.mPageScroll2id("scrollTo",to);
            });
            $("a[rel='previous']").click(function(e){
                e.preventDefault();
                var to=$(this).parent().prev().attr("id");
                $.mPageScroll2id("scrollTo",to);
            });
        });
    })(jQuery);
</script>

Does this help?

I’m not sure. I’ve done my sections with short codes, is it the same?
But most of all I don’t know where in the footer should I insert the code?
Thanks!

I can’t tell if it would work in your layout (regardless of how you created your sections). I’ll need to see your page code or link to provide further assistance.

You can add it below <?php wp_footer(); ?> line in your theme’s footer.php.

Ok. Hope this helps. There is some dummy content for now.. Here’s the page:

<div id="artists">
<p style="text-align: center;">?[ps2id id='artists'/]</p>

<h2 style="text-align: center;"><span style="color: #000000;"> ARTISTS</span></h2>
<p style="text-align: center;">[colio id="artists"]</p>

</div>

<hr />

<div id="about">
<h2 style="text-align: center;"></h2>
<p style="text-align: center;">?[ps2id id='about'/]</p>

<h2 style="text-align: center;"><span style="color: #000000;">ABOUT US</span></h2>
<p style="text-align: left;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

<hr />
<p style="text-align: center;"></p>

</div>
<div id="contact">
<h2 style="text-align: center;"><span style="color: #000000;">CONTACT</span></h2>
<a href="#" rel="”m_PageScroll2id”">Back to top</a>

<hr />

&nbsp;

</div>

Thank you!

You don’t need the shortcodes as you already have the divs with the ids (id attribute values should be unique):

<div id="artists">
    <!-- your content -->
    <a href="#" rel="next">Next</a>
</div>

<hr />

<div id="about">
    <!-- your content -->
    <a href="#" rel="next">Next</a>
    <a href="#" rel="previous">Previous</a
</div>

<hr />

<div id="contact">
    <!-- your content -->
    <a href="#" rel="previous">Previous</a
</div>

<hr />

If the above is your markup, then in footer.php try adding:

<script>
    (function($){
        $(window).load(function(){
            $("a[rel='next']").click(function(e){
                e.preventDefault();
                var to=$(this).parent().next().next().attr("id");
                $.mPageScroll2id("scrollTo",to);
            });
            $("a[rel='previous']").click(function(e){
                e.preventDefault();
                var to=$(this).parent().prev().prev().attr("id");
                $.mPageScroll2id("scrollTo",to);
            });
        });
    })(jQuery);
</script>

Hello, is there any way to use this with one fixed nav? Instead of having next / prev in each section? Im using this plugin already on my site and would love a way to leverage it this way. From a setup like this: Thank you!

<div class=”container”>
<div class=”fixed-nav”>
next
previous
</div>

<section id=”no1″>text</section>
<section id=”no1″>text</section>
<section id=”no1″>text</section>
<section id=”no1″>text</section>

</div>

There is a way but it depends on your exact markup and layout. If you could send me your HTML I’d be able to help.