如何使用 Waypoints 动画使页面滚动更流畅？答案

【问题标题】：how to make page scroll more smooth with Waypoints animations?如何使用 Waypoints 动画使页面滚动更流畅？
【发布时间】：2016-07-14 10:21:15
【问题描述】：

我的页面上有几个部分，上面有 Waypoints css3 动画。您可以通过单击菜单链接或向下滚动来访问这些部分，我希望 Waypoints 在这两种情况下都会触发。

问题是有部分：关于、服务、价格、图库、团队等，假设单击图库，我不希望前面的部分触发，因为页面根本不能平滑滚动。

到目前为止，我设法写了这个（其他部分等等）：

var prices = new Waypoint({
        element: document.getElementById('prices'),
        handler: function(direction) {
          // animations in the section
        },
        offset: 410
      });

其他部分以此类推。然后，如果单击的菜单项更远，我会在前面的部分禁用航点：

$('.link').click(function(){
    var nameOfLink = $(this).attr('href').replace('#', '');

    if(nameOfLink == 'prices') {
      Waypoint.disableAll();
      navbar.enable();
      prices.enable();
    }
    if(nameOfLink == 'gallery') {
      Waypoint.disableAll();
      navbar.enable();
      gallery.enable();
    }
    if(nameOfLink == 'team') {
      Waypoint.disableAll();
      navbar.enable();
      team.enable();
    }

这是平滑滚动代码：

    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top -104
    }, 1000);
    return false;

});

它可以工作，肯定比以前更流畅，但仍然没有我想要的那么流畅（我在其他网站上看到它也能正常工作）。

我怎样才能使它更有效？

【问题讨论】：

标签： javascript jquery jquery-waypoints

【解决方案1】：

使用animate() 函数时，您有几个选项可以达到您想要的“平滑度”水平：

1) 您可以修改动画中使用的easing 函数（默认缓动为swing），这很可能是您需要修改以获得您想要的结果寻找，例如：

$('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top -104
}, 1000, 'easeInOutQuart');

缓动选项的完整列表可以在here* 找到。

2)也可以修改duration animate() 函数的参数来控制速度滚动（完成动画需要多长时间毫秒）。

*需要包含jQuery UI 库。

【讨论】：