javascript smoothscroll

Posted 2021-05-03

// Adapted from Forestrf
// http://jsfiddle.net/forestrf/tPQSv/2/

var SmoothScroll = function (){}

SmoothScroll.prototype.scrollTo = function (element, duration) {
  var e = document.documentElement;
  if(e.scrollTop===0){
    var t = e.scrollTop;
    ++e.scrollTop;
    e = t+1===e.scrollTop--?e:document.body;
  }
  this.scrollToC(e, e.scrollTop, element, duration);
}

SmoothScroll.prototype.scrollToC = function (element, from, to, duration) {
  if (duration < 0) return;
  this.scrollToX(element, from, to, 0, 1/duration, 20, this.easeOutCuaic);
}

SmoothScroll.prototype.scrollToX = function (element, x1, x2, t, v, step, operacion) {
  if (t < 0 || t > 1 || v <= 0) return;
  element.scrollTop = x1 - (x1-x2)*operacion(t);
  t += v * step;
  setTimeout((function() {
    this.scrollToX(element, x1, x2, t, v, step, operacion);
}).bind(this), step);
}

SmoothScroll.prototype.easeOutCuaic = function (t){
  t--;
  return t*t*t+1;
}

var sScroll = new SmoothScroll;

export default sScroll;

/*
just need to add data-smoothscroll on links that needs to
add selector to data if not a link

either import file directly for default params
  import './modules/Smoothscroll';
*NOT WORKING YET*
or import class and instance it with custom params
  import Smoothscroll from './modules/Smoothscroll';
  new Smoothscroll(duration[int, in ms], offset[int]);
duration defaults to 1000
offset defaults to -50
*/

// Adapted from Forestrf
// http://jsfiddle.net/forestrf/tPQSv/2/

class Smoothscroll {
  constructor(duration = 1000, offset = -50) {
    const links = Array.from(document.querySelectorAll('[data-smoothscroll]'));

    links.forEach(link => {
      link.addEventListener('click', (ev) => {
        ev.preventDefault();
        const href = link.getAttribute('href') || link.dataset.smoothscroll;
        const target = document.querySelector(href);
        const targetPos = target.offsetTop + offset;
        this.scrollTo(targetPos, duration);
      })
    })
  }

  scrollTo(elementY, duration) {
    let e = document.documentElement;
    if (e.scrollTop === 0) {
      const t = e.scrollTop;
      ++e.scrollTop;
      e = t + 1 === e.scrollTop-- ? e : document.body;
    }
    this.scrollToC(e, e.scrollTop, elementY, duration);
  }

  scrollToC(elementY, from, to, duration) {
    if (duration < 0) return;
    this.scrollToX(elementY, from, to, 0, 1 / duration, 20, this.easeOutCubic);
  }

  // eslint-disable-next-line max-params
  scrollToX(elementY, x1, x2, t, v, step, operation) {
    if (t < 0 || t > 1 || v <= 0) return;
    elementY.scrollTop = x1 - (x1 - x2) * operation(t);
    t += v * step;
    setTimeout((function () {
      this.scrollToX(elementY, x1, x2, t, v, step, operation);
    }).bind(this), step);
  }

  easeOutCubic(t) {
    t--;
    return t * t * t + 1;
  }
}

export default new Smoothscroll();