scroll to animation only with js 예제

웹페이지에서 스크롤을 내리다가 맨 위쪽으로 한번에 이동하는 go top scroll button을 구현하는데, 대부분의 구현 방식이 jQuery를 이용하고 있다.

 CSR 박식 프로젝트를 진행하면서 무거운 라이브러리에 속하는 jQuery를 이용하지 않는 추세라 jQuery가 아닌 순수 자바스크립트로 구현하는 방법을 찾다가 기록 용으로 남겨 놓는다.

 

물론 스크롤 애니메이션 관련 라이브러리들도 많다.

 

* code내에서 document.body => document.documentElement 로 수정 필요

document.getElementsByTagName('button')[0].onclick = function () {
   scrollTo(document.documentElement, 0, 1250);   
}
    
function scrollTo(element, to, duration) {
    var start = element.scrollTop,
        change = to - start,
        currentTime = 0,
        increment = 20;
        
    var animateScroll = function(){        
        currentTime += increment;
        var val = Math.easeInOutQuad(currentTime, start, change, duration);
        element.scrollTop = val;
        if(currentTime < duration) {
            setTimeout(animateScroll, increment);
        }
    };
    animateScroll();
}

//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d) {
  t /= d/2;
	if (t < 1) return c/2*t*t + b;
	t--;
	return -c/2 * (t*(t-2) - 1) + b;
};

 

https://gist.github.com/andjosh/6764939

ScrollTo animation using pure javascript and no jquery