Reputation: 9722

jQuery: jump to next <section>

So this should be fairly basic... and I'm doing it, but I wanted to ask for a few different options.

One option is using the "Smooth Scroll" and anchor names... but I find that to be quite inconsistent.

This is my HTML structure:

<section id="home">
<!-- some content -->
</section>

<section id="about">
<!-- some content -->
</section>

<section id="services">
<!-- some content -->
</section>

...

I have some "quick buttons" on the right side of the section and basically allows you to "travel" up or down from section to section.

Upvotes: 1

Answers (5)

SeanCannon

Reputation: 77996

jQuery.fn.extend({
  scrollTo : function(speed, easing) {
    return this.each(function() {
      var targetOffset = $(this).offset().top;
      $('html,body').animate({scrollTop: targetOffset}, speed, easing);
    });
  }
});

// Scroll to "about" section
$('#about').scrollTo('fast', 'linear');

Update - To jump from section to section use a simple event handler:

JQuery:

$('.next-section').click(function(){
    var $this = $(this),
        $next = $this.parent().next();

    $next.scrollTo($next.offset().top, 500, 'linear');
});

$('.prev-section').click(function(){
    var $this = $(this),
        $prev = $this.parent().prev();

    $prev.scrollTo($prev.offset().top, 500, 'linear');
});

HTML:

<section id="about">
    <a href="#" class="prev-section">Previous Section</a>
    <a href="#" class="next-section">Next Section</a>
    <div class="section-content">
        Foobar
    </div>
</section>

Here's a demo: http://jsfiddle.net/AlienWebguy/Xdg2k/

Upvotes: 5

Szabotage

Reputation: 1

I managed to get an awesome smooth scroll using mootools for my 'jump to next' having not liked the jaggedness of the jquery ones. It also works in unison with the other jquery on the page once you do a little tweaking.

http://davidwalsh.name/smooth-scroll-mootools

The site I use it on is currently under construction but here's the link http://ggszabo/new/indexb.html

Click the section ribbons to view.

Upvotes: 0

ryanb

Reputation: 1084

You could try just setting the scrolltop

var doc = (document.contentWindow || document).document || document.ownerDocument || document,
    el = ($.browser.webkit) ? doc.body : doc.documentElement;

$(el).scrollTop($('#services').offset().top);

Upvotes: 0