How to apply this easing transition? No jQuery

Question

l found this script (that l don't understand) :

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
}

But it works perfectly on my attempt to scroll to the top :

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

DEMO THERE

Well, can someone help me please to rectify the script below which doesn't work :

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 is correct so l don't know why it doesn't work...

Thank you!

`target` is a string, not a position (in pixels). You need to determine the position of your target, and pass that to `scrollTo`, not the name of the target itself. — entropic, May 03 '18 at 16:35

score 0 · Answer 1 · edited Jun 27 '18 at 11:03

I suggest to change the span as follows:

<span id="toTop" onclick="myFunction();"><i class="fa fa-angle-up" aria-hidden="true"></i></span>

Only add an event handler for onclick and call the following JavaScript function to get the effect:

function myFunction() {
    $('html, body').animate({scrollTop:0}, 'slow');
    return false;
}

In my example I am using jQuery, as it is easier to implement: Link to example

How to apply this easing transition? No jQuery

1 Answers1