Question

所以这应该是相当基础的...而且我正在这样做，但我想要一些不同的选择。

一个选项是使用“平滑滚动”和锚名称...但我发现它非常不一致。

这是我的HTML结构：

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

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

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

...

我在该部分的右侧有一些“快速按钮”，基本上允许您从一个部分向上或向下“行走”。

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

更新 - 要从一个部分跳到另一个部分，请使用简单的事件处理程序：

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 2

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

Answer 3

所以你想根据用户点击的链接向上和向下滚动页面？

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

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

Answer 4

您可以尝试设置滚动顶部

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

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

Answer 5

我设法使用mootools获得了一个非常流畅的滚动，以便我跳到下一个＆＃39;不喜欢jquery的锯齿状。一旦你做了一些调整，它也可以与页面上的其他jquery协同工作。

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

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

单击要查看的色带部分。

jQuery：跳转到下一个<section> </section>

5 个答案: