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

Answer 1

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

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

Answer 4

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

Answer 5

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/