joshbeckman/animatedScrollTo.js

AdaltonLeite · 2018-07-12T13:17:30Z

Thank you very much! 😄

Cdvalencia · 2018-08-22T16:12:28Z

thanks, this example used it, with react.js, so:

constructor(props){
   super(props);
   this.scrollTo = this.scrollTo.bind(this);
 }; 

 scrollDown(num) {    
   console.log(num)
   this.scrollTo(document.body, num, 1250);
 }

 scrollTo(element, to, duration) {
     var start = document.scrollingElement.scrollTop,
         change = to - start,
         currentTime = 0,
         increment = 20;

     var animateScroll = function(){
         var 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;
         };
         currentTime += increment;
         var val = easeInOutQuad(currentTime, start, change, duration);
         document.scrollingElement.scrollTop = val;
         if(currentTime < duration) {
             setTimeout(animateScroll, increment);
         }
     };
     animateScroll();
 }

hugotox · 2018-09-05T20:11:51Z

Just curious, why mutate the global Math object?

tomaswolfgang · 2018-09-06T16:38:10Z

If you don't want to deal with any sort of intense implementation and you don't care about the easing function, duration, animation speed or any particulars:
scrollTo(ypos){ window.scrollTo({ top: ypos, behavior: "smooth" }) }
This should do the trick

vinczebalazs · 2018-09-11T11:09:00Z

Thanks so much, great solution! :)

c-emil · 2018-09-18T08:49:10Z

@tomaswolfgang window.scrollTo is very nice solution as long as you need to scroll window. It's unfortunately not usable for any element on the page.

DenysMorozov · 2018-10-03T11:15:50Z

@tomaswolfgang window.scrollTo is very nice solution as long as you need to scroll window. It's unfortunately not usable for any element on the page.

const scrolEl = document.querySelector('.modal-window-container');
const x = elX - (scrolEl.clientWidth / 2);
const y = elY - (scrolEl.clientHeight / 2);
scrolEl.scrollTo(x, y);

Everything works fine for us.

whossein · 2018-11-22T09:02:48Z

const
scrollTo = function(to, duration) {
    const
    element = document.scrollingElement || document.documentElement,
    start = element.scrollTop,
    change = to - start,
    startDate = +new Date(),
    // t = current time
    // b = start value
    // c = change in value
    // d = duration
    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;
    },
    animateScroll = function() {
        const currentDate = +new Date();
        const currentTime = currentDate - startDate;
        element.scrollTop = parseInt(easeInOutQuad(currentTime, start, change, duration));
        if(currentTime < duration) {
            requestAnimationFrame(animateScroll);
        }
        else {
            element.scrollTop = to;
        }
    };
    animateScroll();
};

Here's the code a bit modernized. Now it's a lot smoother and works in Safari as well. If you don't work with babel then replace const with var.

thanks very much!

ClausClaus · 2018-11-22T13:27:52Z

Thanks!!

felipenmoura · 2018-12-09T15:56:24Z

Very nice.

I forked it and made a few changes:
https://gist.github.com/felipenmoura/650e7e1292c1e7638bcf6c9f9aeb9dd5

It returns a promise that resolves when the animation is done
It accepts an element as coordinate and scrolls to it (also works with a selector like #some-section-id)
It will not overwrite any existing public structure (like the scrollTo native function or Math's prototype)
Has a default duration
It also uses the document.scrollingElement and you don't need to send document, document.body, window or document.documentElement according to your page structure

I hope it helps and thanks for both inspiring it making it public ;)

sundayhd · 2019-04-26T12:08:14Z


function scrollTo(element, to = 0, duration= 1000, scrollToDone = null) {
    const start = element.scrollTop;
    const change = to - start;
    const increment = 20;
    let currentTime = 0;

    const animateScroll = (() => {

      currentTime += increment;

      const val = Math.easeInOutQuad(currentTime, start, change, duration);

      element.scrollTop = val;

      if (currentTime < duration) {
        setTimeout(animateScroll, increment);
	} else {
		if (scrollToDone) scrollToDone();
	}
    });

    animateScroll();
  };

  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;
  };

Thanks guys!! I added "scrollToDone" to execute callback function when scrolling done.

usage example:
scrollTo(document.body, 500, 1000, () => { console.log("Done with scrolling !!!!") }

ruucm · 2019-05-06T08:07:47Z

Thanks a lot!

marsderp · 2019-05-09T16:39:08Z

Has anyone added more easing functions?

orrybaram · 2019-06-18T16:46:11Z

Here's a typescript version if anyone is interested:

type EaseInOutQuadOptions = {
  currentTime: number;
  start: number;
  change: number;
  duration: number;
};

const easeInOutQuad = ({
  currentTime,
  start,
  change,
  duration,
}: EaseInOutQuadOptions) => {
  let newCurrentTime = currentTime;
  newCurrentTime /= duration / 2;

  if (newCurrentTime < 1) {
    return (change / 2) * newCurrentTime * newCurrentTime + start;
  }

  newCurrentTime -= 1;
  return (-change / 2) * (newCurrentTime * (newCurrentTime - 2) - 1) + start;
};

type SmoothScrollOptions = {
  duration: number;
  element: HTMLElement;
  to: number;
};
export default function smoothScroll({
  duration,
  element,
  to,
}: SmoothScrollOptions) {
  const start = element.scrollTop;
  const change = to - start;
  const startDate = new Date().getTime();

  const animateScroll = () => {
    const currentDate = new Date().getTime();
    const currentTime = currentDate - startDate;
    element.scrollTop = easeInOutQuad({
      currentTime,
      start,
      change,
      duration,
    });

    if (currentTime < duration) {
      requestAnimationFrame(animateScroll);
    } else {
      element.scrollTop = to;
    }
  };
  animateScroll();
}

wnsgh78b · 2019-08-21T06:08:10Z

	function scrollTo(element, durationTop, durationLeft) {
	    var startTop = element.scrollTop,
	    	startLeft = element.scrollLeft,
	        changeTop = durationTop - startTop,
	        changeLeft = durationLeft - startLeft,//window.scrollX - startLeft,
	        currentTimeTop = 0,
	        currentTimeLeft = 0,
	        increment = 20;
	       
	    var animateScrollTop = function(){        
	        currentTimeTop += increment;
	        var val = Math.easeInOutQuad(currentTimeTop, startTop, changeTop, durationTop);
	        element.scrollTop = val;
	        if(currentTimeTop < durationTop) {
	            setTimeout(animateScrollTop, increment);
	        }
		};

		var animateScrollLeft = function(){        
	        currentTimeLeft += increment;
	        var val = Math.easeInOutQuad(currentTimeLeft, startLeft, changeLeft, durationLeft);
	        element.scrollLeft = val;
	        if(currentTimeLeft < durationLeft) {
	            setTimeout(animateScrollLeft, increment);
	        }
		};

		animateScrollTop();
		animateScrollLeft();
	}

//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/2tt + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
};

darkhorse-coder · 2019-11-20T04:36:48Z

@andjosh Thank you!! Very useful!!

joloiuhj · 2020-02-10T10:35:02Z

works``

friedboats · 2020-03-02T21:56:40Z

Thank you for this!!! Spent all day looking for a solution.

mohsenasm · 2020-05-05T13:19:09Z

Thanks!!!
دعای خیر جهانیان پشت سرت :)))

emanavas · 2020-07-26T16:31:33Z

Works Great. Thanks!!

RaymondBakker · 2020-09-16T20:24:05Z

Just a heads up that supplying 0 duration will make Math.easeInOutQuad() return the value -Infinity and supplying 1 duration will make it return large negative numbers. If you need to supply 0 duration, an easy fix would be to add an extra if statement at the start of this function returning the original supplied duration.

Math.easeInOutQuad = function (t, b, c, d) {
    if (d <= 0)
        return c;

...

}

Of course, the better way may be to just set scrollTop instead of using this function altogether.

quirozcarlos · 2020-10-06T22:39:56Z

Nice resource, is very useful 🥇

KarloZKvasin · 2020-11-04T09:57:16Z

Here's a typescript version if anyone is interested:

type EaseInOutQuadOptions = {
  currentTime: number;
  start: number;
  change: number;
  duration: number;
};

const easeInOutQuad = ({
  currentTime,
  start,
  change,
  duration,
}: EaseInOutQuadOptions) => {
  let newCurrentTime = currentTime;
  newCurrentTime /= duration / 2;

  if (newCurrentTime < 1) {
    return (change / 2) * newCurrentTime * newCurrentTime + start;
  }

  newCurrentTime -= 1;
  return (-change / 2) * (newCurrentTime * (newCurrentTime - 2) - 1) + start;
};

type SmoothScrollOptions = {
  duration: number;
  element: HTMLElement;
  to: number;
};
export default function smoothScroll({
  duration,
  element,
  to,
}: SmoothScrollOptions) {
  const start = element.scrollTop;
  const change = to - start;
  const startDate = new Date().getTime();

  const animateScroll = () => {
    const currentDate = new Date().getTime();
    const currentTime = currentDate - startDate;
    element.scrollTop = easeInOutQuad({
      currentTime,
      start,
      change,
      duration,
    });

    if (currentTime < duration) {
      requestAnimationFrame(animateScroll);
    } else {
      element.scrollTop = to;
    }
  };
  animateScroll();
}

Small update... and extend about direction / type

interface EaseInOutQuadOptions {
  currentTime: number;
  start: number;
  change: number;
  duration: number;
}

const easeInOutQuad = (currentTime, start, change, duration): EaseInOutQuadOptions => {
  let newCurrentTime = currentTime;
  newCurrentTime /= duration / 2;

  if (newCurrentTime < 1) {
    return (change / 2) * newCurrentTime * newCurrentTime + start;
  }

  newCurrentTime -= 1;
  return (-change / 2) * (newCurrentTime * (newCurrentTime - 2) - 1) + start;
};

interface SmoothScrollOptions {
  duration: number;
  element: HTMLElement;
  to: number;
  type: 'scrollTop' | 'scrollLeft';
}

const smoothScroll = (duration, element, to, type = 'scrollTop'): SmoothScrollOptions => {
  const start = element[type];
  const change = to - start;
  const startDate = new Date().getTime();

  const animateScroll = () => {
    const currentDate = new Date().getTime();
    const currentTime = currentDate - startDate;
    element[type] = easeInOutQuad(currentTime, start, change, duration);

    if (currentTime < duration) {
      requestAnimationFrame(animateScroll);
    } else {
      element[type] = to;
    }
  };
  animateScroll();

  return null;
};

export { smoothScroll };

dhovart · 2020-12-17T10:05:40Z

@KarloZKvasin I think your update is not properly typed. easeInOutQuad is set to return an EaseInOutQuadOptions. Same goes for smoothScroll, set to return a SmoothScrollOptions.
You should dump these interfaces and type each function argument instead.

Updated:

const easeInOutQuad = (
  currentTime: number,
  start: number,
  change: number,
  duration: number,
): number => {
  let newCurrentTime = currentTime;
  newCurrentTime /= duration / 2;

  if (newCurrentTime < 1) {
    return (change / 2) * newCurrentTime * newCurrentTime + start;
  }

  newCurrentTime -= 1;
  return (-change / 2) * (newCurrentTime * (newCurrentTime - 2) - 1) + start;
};

const smoothScroll = (
  duration: number,
  element: HTMLElement,
  to: number,
  property: 'scrollTop' | 'scrollLeft',
): void => {
  const start = element[property];
  const change = to - start;
  const startDate = new Date().getTime();

  const animateScroll = () => {
    const currentDate = new Date().getTime();
    const currentTime = currentDate - startDate;

    element[property] = easeInOutQuad(currentTime, start, change, duration);

    if (currentTime < duration) {
      requestAnimationFrame(animateScroll);
    } else {
      element[property] = to;
    }
  };
  animateScroll();
};

export { smoothScroll };

aLIEzsss4 · 2021-01-13T07:10:20Z

how do work with scroll-snap-type: x mandatory;

ruucm · 2021-02-17T10:05:57Z

const
scrollTo = function(to, duration) {
    const
    element = document.scrollingElement || document.documentElement,
    start = element.scrollTop,
    change = to - start,
    startDate = +new Date(),
    // t = current time
    // b = start value
    // c = change in value
    // d = duration
    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;
    },
    animateScroll = function() {
        const currentDate = +new Date();
        const currentTime = currentDate - startDate;
        element.scrollTop = parseInt(easeInOutQuad(currentTime, start, change, duration));
        if(currentTime < duration) {
            requestAnimationFrame(animateScroll);
        }
        else {
            element.scrollTop = to;
        }
    };
    animateScroll();
};

Here's the code a bit modernized. Now it's a lot smoother and works in Safari as well. If you don't work with babel then replace const with var.

Thanks. it is a lot more soomother

Ciantic · 2021-03-17T00:19:30Z

I also changed it to use performance.now():

var scrollTo = function(to, duration) {
    var element = document.scrollingElement || document.documentElement,
    start = element.scrollTop,
    change = to - start,
    startTs = performance.now(),
    // t = current time
    // b = start value
    // c = change in value
    // d = duration
    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;
    },
    animateScroll = function(ts) {
        var currentTime = ts - startTs;
        element.scrollTop = parseInt(easeInOutQuad(currentTime, start, change, duration));
        if(currentTime < duration) {
            requestAnimationFrame(animateScroll);
        }
        else {
            element.scrollTop = to;
        }
    };
    requestAnimationFrame(animateScroll);
};

For the utility if you just want to paste this around, here is minimized version of the requestAnimationFrame version:

var scrollTo=function(l,t){var c=document.scrollingElement||document.documentElement,m=c.scrollTop,a=l-m,s=performance.now(),i=function(o){var n,e,r=o-s;c.scrollTop=parseInt((n=r,e=m,o=a,(n/=t/2)<1?o/2*n*n+e:-o/2*(--n*(n-2)-1)+e)),r<t?requestAnimationFrame(i):c.scrollTop=l};requestAnimationFrame(i)};

Then use it like the others

scrollTo(150, 1000);

Alesvetina · 2021-07-19T06:43:27Z

How would you go about making a linear function, no easing, just scroll down evenly in a set duration? Thank you!

9mm · 2021-08-27T18:26:26Z

@Alesvetina you would change the easing function for easeInOutQuad = function (t) { ... to simply this:

function (t) { return t; }

Here's An updated version that satisfies much more strict ESLint parameters, plus new ES syntax:

export const animateScrollTo = (to, duration) => {
  const element = document.scrollingElement || document.documentElement;
  const start = element.scrollTop;
  const change = to - start;
  const startDate = +new Date();
  // t = current time
  // b = start value
  // c = change in value
  // d = duration
  const easeInOutQuad = (t, b, c, d) => {
    let t2 = t;
    t2 /= d / 2;
    if (t2 < 1) return (c / 2) * t2 * t2 + b;
    t2 -= 1;
    return (-c / 2) * (t2 * (t2 - 2) - 1) + b;
  };
  const animateScroll = () => {
    const currentDate = +new Date();
    const currentTime = currentDate - startDate;
    element.scrollTop = parseInt(easeInOutQuad(currentTime, start, change, duration), 10);
    if (currentTime < duration) {
      requestAnimationFrame(animateScroll);
    } else {
      element.scrollTop = to;
    }
  };
  animateScroll();
};

alexsad · 2022-06-03T01:55:20Z

Hi, an alternative version with top and left props (typescript).

 
const scrollTo = ({element, top, left, duration}: {
        element: HTMLElement, 
        top: number,
        left: number, 
        duration: number,    
    }) => {
        const startTop = element.scrollTop;
        const startLeft = element.scrollLeft;
        const changeTop = top - startTop;
        const changeLeft = left - startLeft;
        const startDate = new Date().getTime();

        const animateScroll = function(){
            const currentDate = new Date().getTime();
            const currentTime = currentDate - startDate;            
            element.scrollTop = easeInOutQuad(currentTime, startTop, changeTop, duration);
            element.scrollLeft = easeInOutQuad(currentTime, startLeft, changeLeft, duration);

            if(currentTime < duration) {
                requestAnimationFrame(animateScroll);
            } else {
                element.scrollTop = top;
                element.scrollLeft = left;
            }
        };
        animateScroll();
    }

	document.getElementsByTagName('button')[0].onclick = function () {
	scrollTo(document.body, 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/2tt + b;
	t--;
	return -c/2 * (t*(t-2) - 1) + b;
	};

joshbeckman/animatedScrollTo.js

AdaltonLeite commented Jul 12, 2018

Uh oh!

Cdvalencia commented Aug 22, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hugotox commented Sep 5, 2018

Uh oh!

tomaswolfgang commented Sep 6, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vinczebalazs commented Sep 11, 2018

Uh oh!

c-emil commented Sep 18, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DenysMorozov commented Oct 3, 2018

Uh oh!

whossein commented Nov 22, 2018

Uh oh!

ClausClaus commented Nov 22, 2018

Uh oh!

felipenmoura commented Dec 9, 2018

Uh oh!

sundayhd commented Apr 26, 2019

Uh oh!

ruucm commented May 6, 2019

Uh oh!

marsderp commented May 9, 2019

Uh oh!

orrybaram commented Jun 18, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wnsgh78b commented Aug 21, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

darkhorse-coder commented Nov 20, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

joloiuhj commented Feb 10, 2020

Uh oh!

friedboats commented Mar 2, 2020

Uh oh!

mohsenasm commented May 5, 2020

Uh oh!

emanavas commented Jul 26, 2020

Uh oh!

RaymondBakker commented Sep 16, 2020

Uh oh!

quirozcarlos commented Oct 6, 2020

Uh oh!

KarloZKvasin commented Nov 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dhovart commented Dec 17, 2020

Uh oh!

aLIEzsss4 commented Jan 13, 2021

Uh oh!

ruucm commented Feb 17, 2021

Uh oh!

Ciantic commented Mar 17, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Alesvetina commented Jul 19, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

9mm commented Aug 27, 2021

Uh oh!

alexsad commented Jun 3, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Cdvalencia commented Aug 22, 2018 •

edited

Loading

tomaswolfgang commented Sep 6, 2018 •

edited

Loading

c-emil commented Sep 18, 2018 •

edited

Loading

orrybaram commented Jun 18, 2019 •

edited

Loading

wnsgh78b commented Aug 21, 2019 •

edited

Loading

darkhorse-coder commented Nov 20, 2019 •

edited

Loading

KarloZKvasin commented Nov 4, 2020 •

edited

Loading

Ciantic commented Mar 17, 2021 •

edited

Loading

Alesvetina commented Jul 19, 2021 •

edited

Loading

alexsad commented Jun 3, 2022 •

edited

Loading