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

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:

    Previous Section
    Next Section
    

        Foobar
    

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