feat: add smooth scroll when clicking on a menu item

README.md

@@ -76,16 +76,46 @@ scrollSpy('#main-menu', options)
 ```html
 <script src="/path/to/dist/simple-scrollspy.min.js"></script>
 <script>
-    window.onload = function () {
-        scrollSpy('#main-menu', {
-            sectionClass: '.scrollspy',
-            menuActiveTarget: '.menu-item',
-            offset: 100,
-        })
-    }
+  window.onload = function () {
+    scrollSpy('#main-menu', {
+      sectionClass: '.scrollspy',
+      menuActiveTarget: '.menu-item',
+      offset: 100,
+      smoothScroll: true,
+    })
+  }
 </script>
 ```
 
+### Smooth scroll
+
+```javascript
+import jumpTo from 'jump.js'
+
+scrollSpy('#main-menu', {
+  // ....,
+
+  // enable smooth scroll:
+  // - true: enable with the default scroll behavior
+  // - false: disable this feature
+  // - object: enable with some options that will pass to `window.scroll` or `smoothScrollBehavior`
+  //   + Default behavior: https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
+  //   + Jump.js: https://www.npmjs.com/package/jump.js
+  smoothScroll: {
+    duration: 1000, // only works with jump.js,
+    offset: -100,   // only works with jump.js,
+  },
+
+  // customize scroll behavior,
+  // - default: window.scroll({ behavior: 'smooth', ...smoothScroll })
+  // - customize: you can define your scroll behavior. Ex: use `jump.js`, jQuery, .etc
+  smoothScrollBehavior: function(element, options) {
+    // use `jump.js` instead of the default scroll behavior
+    jumpTo(element, options)
+  }
+})
+```
+
 ## Development
 
 ```bash

demo/index.html

@@ -56,6 +56,7 @@ <h1>
         menuActiveTarget: '.menu-item',
         offset: 100,
         scrollContainer: '.scroll-container',
+        smoothScroll: true,
       })
     }
   </script>

package.json

@@ -27,5 +27,8 @@
     "terser-webpack-plugin": "^2.3.1",
     "webpack": "^4.4.1",
     "webpack-cli": "^3.3.10"
+  },
+  "optionalDependencies": {
+    "jump.js": "^1.0.2"
   }
 }

src/scrollspy.js

@@ -15,8 +15,11 @@ export class ScrollSpy {
       hrefAttribute: 'href',
       activeClass: 'active',
       scrollContainer: '',
+      smoothScroll: {},
     }
 
+    options.smoothScroll = options.smoothScroll === true && {} || options.smoothScroll
+
     this.menuList = menu instanceof HTMLElement ? menu : document.querySelector(menu)
     this.options = Object.assign({}, defaultOptions, options)
 
@@ -28,12 +31,30 @@ export class ScrollSpy {
 
     this.sections = document.querySelectorAll(this.options.sectionClass)
 
-    this.listen()
+    this.attachEventListeners()
   }
 
-  listen() {
+  attachEventListeners() {
     if (this.scroller) {
       this.scroller.addEventListener('scroll', () => this.onScroll())
+
+      // smooth scroll
+      if (this.options.smoothScroll) {
+        const menuItems = this.menuList.querySelectorAll(this.options.menuActiveTarget)
+        menuItems.forEach((item) => item.addEventListener('click', this.onClick.bind(this)))
+      }
+    }
+  }
+
+  onClick(event) {
+    const targetSelector = event.target.getAttribute(this.options.hrefAttribute)
+    const targetElement = document.querySelector(targetSelector)
+
+    if (targetElement && this.options.smoothScroll) {
+      // prevent click event
+      event.preventDefault()
+      // handle smooth scrolling to 'targetElement'
+      this.scrollTo(targetElement)
     }
   }
 
@@ -47,6 +68,19 @@ export class ScrollSpy {
     }
   }
 
+  scrollTo(targetElement) {
+    const smoothScrollBehavior = typeof this.options.smoothScrollBehavior === 'function' && this.options.smoothScrollBehavior
+
+    if (smoothScrollBehavior) {
+      smoothScrollBehavior(targetElement, this.options.smoothScroll)
+    } else {
+      targetElement.scrollIntoView({
+        ...this.options.smoothScroll,
+        behavior: 'smooth',
+      })
+    }
+  }
+
   getMenuItemBySection(section) {
     if (!section) return
     const sectionId = section.getAttribute('id')

webpack.config.js

@@ -2,17 +2,18 @@ const { resolve } = require('path')
 const TerserPlugin = require('terser-webpack-plugin')
 
 module.exports = {
-    entry: resolve(__dirname, 'src/index.js'),
+  entry: resolve(__dirname, 'src/index.js'),
 
-    output: {
-        path: resolve(__dirname, 'demo/dist'),
-        filename: 'simple-scrollspy.min.js',
-        library: 'scrollSpy',
-        libraryTarget: 'umd'
-    },
+  output: {
+    path: resolve(__dirname, 'demo/dist'),
+    filename: 'simple-scrollspy.min.js',
+    chunkFilename: '[name].simple-scrollspy.min.js',
+    library: 'scrollSpy',
+    libraryTarget: 'umd'
+  },
 
-    optimization: {
-        minimize: true,
-        minimizer: [new TerserPlugin()],
-    },
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()],
+  },
 }