jQuery：跳转到下一个<section>

Question

所以这应该是相当基本的...我正在这样做，但我想问几个不同的选项。

一个选择是使用“平滑滚动”和锚名称......但我觉得这是相当不一致的。

这是我的HTML结构：

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

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

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

... 

我对段的右边，有一个“快速按钮”，基本上让你“旅行”向上或向下的部分章节。

Answer 1

查看scrollTo jQuery插件，它应该完全满足您的需求。

Answer 2

所以你想要上下滚动页面取决于用户点击哪个链接？

从我的经验来看，jQuery.ScrollTo插件是最好的。易于使用和大量的支持

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

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

更新 - 从一节跳转到节用一个简单的事件处理程序：

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> 

这里有一个演示：http://jsfiddle.net/AlienWebguy/Xdg2k/

Answer 4

你可以尝试只设置scrollTop的

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

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

Answer 5

我设法用MooTools的我“跳转到下一个真棒平滑滚动'不喜欢jquery的锯齿。一旦你做了一些调整，它也可以与页面上的其他jquery协同工作。

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

我用它在该网站目前正在建设中，但这里的链接http://ggszabo/new/indexb.html

单击区段丝带查看。