Simple Scroll To Top Component For Vue.js

Description:

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

Basic usage:

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; 
}

Preview:

Simple Scroll To Top Component For Vue.js

Download Details:

Author: asdf1899

Live Demo: https://anasaraid.me/vue-simple-scroll-up-example/

Download Link: https://github.com/asdf1899/vue-simple-scroll-up/archive/master.zip

Official Website: https://github.com/asdf1899/vue-simple-scroll-up

Install & Download:

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

You Might Be Interested In:

Add Comment