A Back-to-top component for Vue.js, which scroll page to the top when clicked
Branch: master
Clone or download
Latest commit 4d0b8d9 Nov 27, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist add new dists Nov 27, 2018
example add new dists Nov 27, 2018
src add scrollFn Nov 27, 2018
.babelrc Initial version Jun 20, 2017
.gitignore Add dist to import the builded source code Jun 7, 2018
LICENSE.md Update LICENSE.md Jun 20, 2017
README.md refactoring after merge Nov 27, 2018
package.json new version Nov 27, 2018
webpack.config.js Initial version Jun 20, 2017
yarn.lock update example Dec 19, 2017

README.md

Vue Backtotop Component

npm

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