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
Vue...
Or on a single component
...}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".
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.
You can also know when scroll ends
Now, it's possible to use your own html/vue component inside vue-backtotop component
<!-- in your template -->
/* in your css */