| 1 | import easeInOutQuad from './easing.js' |
| 2 | |
| 3 | const jumper = () => { |
| 4 | // private variable cache |
| 5 | // no variables are created during a jump, preventing memory leaks |
| 6 | |
| 7 | let element // element to scroll to (node) |
| 8 | |
| 9 | let start // where scroll starts (px) |
| 10 | let stop // where scroll stops (px) |
| 11 | |
| 12 | let offset // adjustment from the stop position (px) |
| 13 | let easing // easing function (function) |
| 14 | let a11y // accessibility support flag (boolean) |
| 15 | |
| 16 | let distance // distance of scroll (px) |
| 17 | let duration // scroll duration (ms) |
| 18 | |
| 19 | let timeStart // time scroll started (ms) |
| 20 | let timeElapsed // time spent scrolling thus far (ms) |
| 21 | |
| 22 | let next // next scroll position (px) |
| 23 | |
| 24 | let callback // to call when done scrolling (function) |
| 25 | |
| 26 | // scroll position helper |
| 27 | |
| 28 | function location () { |
| 29 | return window.scrollY || window.pageYOffset |
| 30 | } |
| 31 | |
| 32 | // element offset helper |
| 33 | |
| 34 | function top (element) { |
| 35 | return element.getBoundingClientRect().top + start |
| 36 | } |
| 37 | |
| 38 | // rAF loop helper |
| 39 | |
| 40 | function loop (timeCurrent) { |
| 41 | // store time scroll started, if not started already |
| 42 | if (!timeStart) { |
| 43 | timeStart = timeCurrent |
| 44 | } |
| 45 | |
| 46 | // determine time spent scrolling so far |
| 47 | timeElapsed = timeCurrent - timeStart |
| 48 | |
| 49 | // calculate next scroll position |
| 50 | next = easing(timeElapsed, start, distance, duration) |
| 51 | |
| 52 | // scroll to it |
| 53 | window.scrollTo(0, next) |
| 54 | |
| 55 | // check progress |
| 56 | timeElapsed < duration |
| 57 | ? window.requestAnimationFrame(loop) // continue scroll loop |
| 58 | : done() // scrolling is done |
| 59 | } |
| 60 | |