如何在此代码中添加动画(慢速滚动效果)

Question

如何在此代码中添加动画(慢速滚动效果(。目前，当我向下滚动时，它只是跳到下一部分

window.onload=function(){
//initialize
var winHeight = $(window).height(),
pages = $('.page'), 
navLinks = $('#menu-nav a'),
currentPage = 0;
$('html, body').animate({ scrollTop: 0}, 0);
$(window).on('mousewheel DOMMouseScroll', function(e){
var direction = 'down',
$th = $(this),
currentPageOffset = currentPage * winHeight;
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
direction = 'up';
}
if(direction == 'down' && currentPage <= pages.length - 2){
$th.scrollTop(currentPageOffset + winHeight);
currentPage++;
} else if(direction == 'up' && currentPage > 0) {
$th.scrollTop(currentPageOffset - winHeight);
currentPage--;
}
});
navLinks.each(function(index){
$(this).on('click', function(){
navLinks.parent().removeClass('current');
$(this).parent().addClass('current');
currentPage = index;
});
});
}

Answer 1

您可以使用 CSS 和滚动行为属性执行此操作，如下所示：

html{
scroll-behavior: smooth;
}

但是，Safari 或 IE 不支持此功能。

有关详细信息，请参阅 https://css-tricks.com/almanac/properties/s/scroll-behavior/。