Question

当用户点击此箭头时，它将转到下一部分，然后单击它将转到下一部分。每次用户点击向下箭头时，在短序列部分滚动

这是我的HTML

<section id="intro">

</section>

<section id="about-us">

</section>

<section id="services">

</section>

<section id="team">

</section>

<section id="contact">

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

原帖：

Stackoverflow Original Post

jsfiddle

当使用jQuery仅单击一个特定链接时，如何实现序列部分滚动

1 个答案: