如何在滚动上应用此缓动过渡?没有jQuery

时间:2018-05-04 17:23:48

标签: javascript

我发现了这个script(我不明白):

function scrollTo(c,e,d){d||(d=easeInOutQuart);var a=document.documentElement;if(0===a.scrollTop){var b=a.scrollTop;++a.scrollTop;a=b+1===a.scrollTop--?a:document.body}b=a.scrollTop;0>=e||("object"===typeof b&&(b=b.offsetTop),"object"===typeof c&&(c=c.offsetTop),function(a,b,c,f,d,e,h){function g(){0>f||1<f||0>=d?a.scrollTop=c:(a.scrollTop=b-(b-c)*h(f),f+=d*e,setTimeout(g,e))}g()}(a,b,c,0,1/e,20,d))};
function easeInOutQuart(t) {
    return t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t
}

但它完全适用于我scroll到顶部的尝试(所以这不是问题):

document.getElementById('toTop').onclick = function() {
    scrollTo(0, 2500, easeInOutQuart);
}

DEMO THERE

嗯,有人可以帮助我纠正下面的script,这在纯vanilla JS中无效:

var  elements = document.querySelectorAll('.nav li a'),
     target;
for (var i = 0; i < elements.length; i++) {
     var element = elements[i];
     element.addEventListener('click', function(e) {
          target = this.getAttribute('href');
          console.log(target);
          scrollTo(target, 2500, easeInOutQuart);
     });
}

ATTEMPT LINK NAV

target是正确的,所以我不知道为什么它不起作用......

谢谢!

0 个答案:

没有答案