Simple Scroll To Top Component For Vue.js

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

// 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">

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

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

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">

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

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

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; 


Simple Scroll To Top Component For Vue.js

Download Details:

Author: asdf1899

Live Demo:

Download Link:

Official Website:

Install & Download:

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

Add Comment