smooth-scroll.js

/* Scroll to a certain pixel value from the top of the page */
function scrollToValue(pixel, offset = 200) {
  const newWindowTop = pixel + offset
  window.scroll({
    top: newWindowTop,
    behavior: 'smooth',
  })
}

/* Scroll to an element on the page */
function scrollToElement($element) {
  const elementOffset = $element.offsetTop
  scrollToValue(elementOffset)
}

/* Handler for link callback */
function handleHashLinkClick(event) {
  const $link = event.target
  const hash = $link.hash
  const $target = document.querySelector(hash)

  if ($target) {
    scrollToElement($target)
  }
}

/* Attach handler to any link starting with a hash */
document.addEventListener('click', 'a[href*="#"]', handleHashLinkClick)