Question

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

关键是，有关于，关于，服务，价格，图库，团队等的部分，并且让我们说点击图库，我不希望之前的部分触及，因为页面没有。 t滚动顺畅。

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

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

等其他部分。然后，如果点击的菜单项在下面的路上，我会在前面的部分禁用Waypoint：

$('.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;

}）;

它确实比以前更顺畅，但仍然不如我想的那样顺畅（而且我看到它在其他网站上工作）。

如何使其更有效？

Answer 1

使用animate()功能时，您有几种方法可以达到所需的“平滑度”：

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

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

可以在here*找到完整的宽松选项列表。

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

*需要包含jQuery UI库。

如何使用Waypoint动画使页面滚动更加流畅？

1 个答案: