FLIP implementation of smooth scrolling https://aerotwist.com/blog/flip-your-animations/

smooth-scroll.css

.smooth-scroll {
  transition: transform .5s ease-out;
}

smooth-scroll.js

var isModifiedEvent = function isModifiedEvent(event) {
  return event.ctrlKey || event.shiftKey || event.altKey || event.metaKey
}

var handleClick = function (event) {
  if (event.button !== 0 || isModifiedEvent(event)) {
    return
  }

  var body = document.body
  var pageXOffset = window.pageXOffset
  var pageYOffset = window.pageYOffset

  requestAnimationFrame(function () {
    var scrollXOffset = window.pageXOffset - pageXOffset
    var scrollYOffset = window.pageYOffset - pageYOffset

    body.style.transform = 'translate(' + scrollXOffset + 'px, ' + scrollYOffset + 'px)'

    requestAnimationFrame(function () {
      body.classList.add('smooth-scroll')
      body.style.transform = 'translate(0px, 0px)'
    })

    body.addEventListener('transitionend', function reset(e) {
      if (e.target !== body) {
        return
      }
      body.classList.remove('smooth-scroll')
      body.style.transform = ''
      body.removeEventListener('transitionend', reset)
    }, false)
  })
}

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('a[href^="#"]').forEach(function (element) {
    element.addEventListener('click', handleClick)
  })
})