【问题标题】:jQuery: jump to next <section>jQuery:跳转到下一个 <section>
【发布时间】:2011-10-27 04:59:07
【问题描述】:

所以这应该是相当基本的......我正在这样做,但我想要求一些不同的选择。

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

这是我的 HTML 结构:

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

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

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

...

我在该部分的右侧有一些“快速按钮”,基本上可以让您从一个部分向上或向下“移动”。

【问题讨论】:

  • 我认为这很明显:“但我想要求一些不同的选择。”正如我所说,我正在使用一个名为“平滑滚动”的选项,但它有点不一致。

标签: jquery css html


【解决方案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/

【讨论】:

  • 谢谢...除了将滚动功能附加到特定按钮之外,我还需要能够将页面从“
    ”向下/向上滚动到“
    "
  • 感谢更新代码。它工作得很好,除了它不能缓解......
  • 只需将“线性”更改为您想要的任何缓动,哈哈。包含 JQuery UI 以支持其他缓动类型:jsfiddle.net/AlienWebguy/Xdg2k/7
【解决方案2】:

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

【讨论】:

    【解决方案3】:

    所以您想根据用户点击的链接上下滚动页面?

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

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

    【讨论】:

      【解决方案4】:

      你可以试试只设置滚动条

      var doc = (document.contentWindow || document).document || document.ownerDocument || document,
          el = ($.browser.webkit) ? doc.body : doc.documentElement;
      
      $(el).scrollTop($('#services').offset().top);
      

      【讨论】:

        【解决方案5】:

        由于不喜欢 jquery 的锯齿状,我设法使用 mootools 为我的“跳转到下一个”获得了很棒的平滑滚动。稍作调整后,它也可以与页面上的其他 jquery 协同工作。

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

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

        单击要查看的部分功能区。

        【讨论】:

          猜你喜欢
          • 2014-03-10
          • 2014-04-01
          • 2011-09-15
          • 1970-01-01
          • 2021-03-02
          • 1970-01-01
          • 1970-01-01
          • 2016-08-26
          • 1970-01-01
          相关资源
          最近更新 更多