如何使用Waypoints動畫使頁面滾動更流暢？

Question

我的頁面上有幾節內容，其中包含Waypoints CSS3動畫。 您可以通過單擊菜單鏈接或向下滾動來到達這些部分，在兩種情況下我都希望Waypoint觸發。

關鍵是要有以下幾個部分：關於，服務，價格，圖庫，團隊等，假設單擊圖庫，我不希望前面的部分觸發，因為頁面根本無法平滑滾動。

到目前為止，我設法編寫了此代碼（其他部分依次類推）：

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

以此類推。 然后，如果所單擊的菜單項不在后面，則在前面的部分中禁用Waypoints：

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

寬松選項的完整列表可以在此處*找到。

2）您也可以修改animate()函數的duration參數來控制滾動速度（完成動畫需要多長時間（以毫秒為單位））。

*需要包含jQuery UI庫。