SmoothScroll component built with AlpineJS

smoothscroll.js

/**
 * Given a query selector, will use native smooth scrolling to scroll to element.
 *
 * Usage:
 * import smoothscroll from 'path/to/smoothscroll.js';
 * import Alpine from 'alpinejs';
 * Alpine.data("smoothscroll", smoothscroll);
 * Alpine.start();
 * ...
 * <button x-data="smoothscroll('#main')">Scroll to #main div</button>
 */
export default (selector = null) => ({
  el: null,
  selector: selector,
  init() {
    if(!this.selector) {
      return;
    }
    this.el = document.querySelector(this.selector);
    if(!this.el) {
      return;
    }
    this.$el.addEventListener('click', () => {
      this.el.scrollIntoView({
        behavior: "smooth"
      });
    });
  },
});