jQuery: jump to next

Question

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.

Answer 1

Look into the scrollTo jQuery plugin, it should meet your needs fully.

Answer 2

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.

Answer 3

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/

Answer 4

so you're wanting to scroll up and down the page depending on which link the user clicks on?

from my experience, the jQuery.ScrollTo plugin is the best for this. Easy to use and a lot of support

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Answer 5

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);