Vue Backtotop Component

A Back-to-top component for Vue.js, which scroll page to the top when clicked

Demo

See demo.

Install via npm

npm install vue-backtotop --save

Import and use

Import for global usage

import Vue from 'vue'
import BackToTop from 'vue-backtotop'

Vue.use(BackToTop)
...

Or on a single component

import BackToTop from 'vue-backtotop'
...
},
components: { BackToTop }
...

Props

Name	Type	Default	Description
text	String	'Voltar ao topo	Text of back to top button
visibleoffset	String or Number	600	Where the component should visible when user scroll reach certain offset
visibleoffsetbottom	String or Number	0	Where the component should visible when user scroll reach certain bottom offset
bottom	String	40px	Bottom position of the component
right	String	30px	Right position of the component
scrollFn (eventObject)	Function	30px	Function defining custom actions when scrolling

Events

Name	Description
scrolled	Fired when page’s scroll ends

How to use

Currently, the vue-backtotop has a property named “text”, that is the text which will be visible on button. The default value is “Voltar ao topo”.

<back-to-top text="Back to top"></back-to-top>

The button to back to top become visible at window scroll at 600 > px. If you want to change this value, pass a property named “visibleOffset” with a number value.

<back-to-top text="Back to top" visibleoffset="500"></back-to-top>

You can also know when scroll ends

<back-to-top text="Back to top" @scrolled="myFunction"></back-to-top>

Now, it’s possible to use your own html/vue component inside vue-backtotop component

<!-- in your template -->
<back-to-top bottom="50px" right="50px">
  <button type="button" class="btn btn-info btn-to-top"><i class="fa fa-chevron-up"></i></button>
</back-to-top>

/* in your css */
.btn-to-top {
  width: 60px;
  height: 60px;
  padding: 10px 16px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 22px;
}