Simple Scroll To Top Component For Vue.js

Install & Download:

# NPM
$ npm i vue-simple-scroll-up --save

A simple scroll to top component that smoothly scrolls the page back to the top when clicked.

1. Import and register the component.

import scrollUp from 'vue-simple-scroll-up'

// globally
Vue.use(scrollUp)
// or
components: {
  'vue-scroll-to-top': scrollUp
}

2. Add the scroll to top component to your app.

<vue-scroll-to-top text="Back to top">
</vue-scroll-to-top>

3. Customize the duration of the animation. Default: 800.

<vue-scroll-to-top text="Back to top" :duration="1000">
</vue-scroll-to-top>

4. Customize the distance from the top that reveals the scroll to top button. Default: 400.

<vue-scroll-to-top text="Back to top" :visibleY="1200">
</vue-scroll-to-top>

5. Trigger a function when the page is scrolled to the top.

<vue-scroll-to-top text="Back to top" @scrolledOnTop="yourFunction()">
</vue-scroll-to-top>

6. Override the default styles of the scroll to top button.

.vue-scroll-button {
  background-color: #222; 
  color: #fff;
}
.vue-scroll-button:hover {
  background-color: #333; 
}