如何让页面滚动更顺畅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动画？

回答

相关问题