JS Scroller 滚动不顺畅

Question

大家好，我们的首页在这里：http://wp.partyloo.com/

我添加了一个向下滚动箭头，以向下滚动到它正下方的下一部分。

我得到了以下 HTML：

   <a id="scroll" href="#second"><i class="fa fa-angle-down" style="font-size:54px; color: #fff; text-align: center; display: block; margin: 0 auto;" aria-hidden="true"></i></a>

这是我放置的 JS：

$('a[href*="#"]:not([href="#"])').click(function() {
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
      $('html, body').animate({
        scrollTop: target.offset().top
      }, 600);
      return false;
    }
  }
});

现在，当您单击箭头时，它不会平滑地向下滚动。当您单击它时，它会自动将您带到下一个 div/部分。

我怎样才能放一些流畅的动画，让它平滑而轻松地向下滚动？

提前致谢！

Answer 1

我想你需要这个？

http://www.w3schools.com/css/css3_transitions.asp

a {
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}