滚动

Question

我使用下面的代码滚动到点击箭头的页面的下一部分：

    $(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeOutExpo');
        event.preventDefault();
    });
});

这是html：

<!-- My Story Intro -->
<section class="intro scroll-to-section" id="my-story-intro">
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <a href="#my-story" class="btn page-scroll">
                        <i class="fa fa-angle-down animated"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section> <!-- / #my-story-intro -->

<!-- My story-->
<section id="my-story" class="content-section normal-scroll-to-section">
    <div class="container">

我现在想要实现的是与鼠标滚动完全相同的效果。

所以我会向下滚动，滚动会动画到下一部分，就像点击上面代码上的箭头一样。

此外，我想在第二部分和向上滚动时将滚动设置为第一部分顶部的动画。

我尝试了很多插件，但它们并没有真正起作用。对于我正在寻找的东西，插件似乎是不必要的。

我不希望任何人只为我做代码。来到这里我的希望是得到一些有价值的反馈，希望能指出我正确的方向来实现所需的功能。

修改

我遇到了一些实际上做了我想要的代码，但不幸的是它在操作系统上运行不正常。在Mac上测试后，捕捉在窗口上不起作用，它只是在部分中间随机停止。为什么会这样？代码如下：

  $(function() {
var delay = false;

$(document).on('mousewheel DOMMouseScroll', function(event) {
  if(delay) return;

  delay = true;
  setTimeout(function(){delay = false},200);

  var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

  var a = document.getElementsByClassName("scroll-to");
  if(wd < 0) {
    for(var i = 0 ; i < a.length ; i++) {
      var t = a[i].getClientRects()[0].top;
      if(t >= 40) break;
    }
  }
  else {
    for(var i = a.length-1 ; i >= 0 ; i--) {
      var t = a[i].getClientRects()[0].top;
      if(t < -20) break;
    }
  }
  $('html, body').stop().animate({
      scrollTop: a[i].offsetTop
  }, 1500, 'easeOutExpo');
  event.preventDefault();
});

}）;