Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add smooth scroll when clicking on a menu item #23

Merged
merged 1 commit into from Oct 4, 2021

Conversation

kimyvgy
Copy link
Owner

@kimyvgy kimyvgy commented Oct 4, 2021

This will close #9 by adding options for smooth scrolling feature. For example:

  1. Using via CDN:
<script src="/path/to/dist/simple-scrollspy.min.js"></script>
<script>
  window.onload = function () {
    scrollSpy('#main-menu', {
      sectionClass: '.scrollspy',
      menuActiveTarget: '.menu-item',
      offset: 100,
      smoothScroll: true,
    })
  }
</script>
  1. Using with NPM package:
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)
  }
})

@kimyvgy
Copy link
Owner Author

kimyvgy commented Oct 4, 2021

image

@kimyvgy kimyvgy merged commit e37d961 into kimyvgy:master Oct 4, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

refactor: adding a smooth scroll
1 participant