如何讓頁面滾動更順暢Waypoint動畫？

我在我的頁面上有幾個部分，上面有Waypoints css3動畫。您可以通過單擊菜單鏈接或向下滾動來訪問這些部分，並且我希望Waypoint在這兩種情況下都能觸發。如何讓頁面滾動更順暢Waypoint動畫？

事情是有部分：關於，服務，價格，圖庫，團隊等等，讓我們說點擊圖庫，我不希望以前的部分觸發，因爲頁面不滾動光滑。

到目前爲止，我設法寫這個（等其他部分）：

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;

}）;

它的工作原理肯定比以前更流暢，但仍然不像我希望的那樣流暢（正如我在其他網站上看到的那樣）。

如何讓它更有效？

來源

2016-07-14 oneday

你有幾個選擇使用animate()功能時，達到你想要的「平滑度」的水平：

1）您可以修改在動畫中使用（默認寬鬆swing）的easing功能，這最有可能你會需要修改，讓你正在尋找的結果，例如什麼：

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

寬鬆選項的完整列表，可以發現。

2）你也可以修改animate()功能duration 參數來控制滾動的速度（應該需要多長時間才能完成毫秒的動畫）。

*要求包含jQuery UI庫。

來源

2016-08-03 12:52:33 bwegs

如何讓頁面滾動更順暢Waypoint動畫？

回答

相關問題