"Click to scroll" component using the modern Browser API.

• Just one tiny file
• Component based (great for async loading and code splitting)
• Supports navigation through VueRouter
• Universal code/SSR-safe
• Well tested and documented
• Compatible with Node 8.0+
• Vue as the only dependency
• Highly customizable

A live demo is available at https://oqxy5xr5ny.sse.codesandbox.io/.

$ npm install vue-next-level-scroll

import VueNextLevelScroll from 'vue-next-level-scroll'


export default {
  components: {
    VueNextLevelScroll
  }
}

export default {
  components: {
    VueNextLevelScroll: () => import('vue-next-level-scroll')
  }
}

UNPKG | jsDelivr (available as window.nextLevelScroll)

Vue.component('scroll', window.nextLevelScroll)

// Continue as you wish. If you want to load a scroll behavior polyfill, do it **before** adding the CDN link.

VueNextLevelScroll uses the new ScrollBehavior specification by default. Unfortunately, Firefox is the only browser that has it built-in (by now). For this reason, you might like to go for this polyfill (don't worry, less than 2kB after GZIP).

As you likely have seen, there are various Vue directives out their that handle scrolling as well. You might have used one or two of them already or built one yourself.

But! A component can sometimes be the better approach, as it can be tree shaken, is better suited for universal/SSR code and can be loaded asynchronously as well!

When no target prop is set, the default scroll function will trigger a scroll to top:

<vue-next-level-scroll>
  <img src="https://developmint.de/logo.png">
</vue-next-level-scroll>

When the target prop is provided, the default scroll function look the DOM node up and smooth scroll to it. If the target is a class query, the first found element will be chosen to scroll to.

<vue-next-level-scroll target="#my-target">
  <img src="https://developmint.de/logo.png">
</vue-next-level-scroll>
<div id="my-target"/>

When the target prop is given but no node matches, a console error will appear.

<vue-next-level-scroll target="#my-target">
  <img src="https://developmint.de/logo.png">
</vue-next-level-scroll>
<div id="my-non-existing-target"/>

Error: Could not scroll to #my-target

Most users are satisfied with the default scroll function provided by VueNextLevelScroll However if you need other behavior you can simply write your own function:

<template>
    <vue-next-level-scroll
      target="#my-target"
      :scrollFunction="myScroll">
      <img src="https://developmint.de/logo.png">
    </vue-next-level-scroll>
    <div id="my-non-existing-target"/>
</template>

<script>
export default {
 methods: {
   myScroll (target) { doSomeMagicHere(target) }
  }
}
</script>

You might not need the polyfill then as well 😉

Please see our CONTRIBUTING.md

MIT License - Copyright (c) Developmint - Alexander Lichter