caiofsouza / Vue Backtotop
Licence: mit
A Back-to-top component for Vue.js, which scroll page to the top when clicked
Stars: ✭ 168
Programming Languages
javascript
184084 projects - #8 most used programming language
js
455 projects
Projects that are alternatives of or similar to Vue Backtotop
Geotic
Entity Component System library for javascript
Stars: ✭ 97 (-42.26%)
Mutual labels: npm, component
React Native Blurhash
🖼️ A library to show colorful blurry placeholders while your content loads.
Stars: ✭ 430 (+155.95%)
Mutual labels: npm, component
React D3 Speedometer
✨ ⚛️ React Speedometer component using d3.js 🌈 🎨
Stars: ✭ 162 (-3.57%)
Mutual labels: npm, component
Reactopt
A CLI React performance optimization tool that identifies potential unnecessary re-rendering
Stars: ✭ 1,975 (+1075.6%)
Mutual labels: npm, component
React Trading Ui
Component library for trading applications 😰📉💸
Stars: ✭ 166 (-1.19%)
Mutual labels: component
React Native Modals
A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.
Stars: ✭ 2,013 (+1098.21%)
Mutual labels: component
Mime
The MIME component allows manipulating MIME types.
Stars: ✭ 2,174 (+1194.05%)
Mutual labels: component
Things Calendar
Simple but elegant datepicker for the web — inspired by Things for mac
Stars: ✭ 165 (-1.79%)
Mutual labels: component
Kitsu
🦊 A simple, lightweight & framework agnostic JSON:API client
Stars: ✭ 166 (-1.19%)
Mutual labels: npm
React Jobs
Asynchronously resolve data for your components, with support for server side rendering.
Stars: ✭ 167 (-0.6%)
Mutual labels: component
Clean Publish
Removing configuration files and fields in package.json before publishing to npm
Stars: ✭ 165 (-1.79%)
Mutual labels: npm
Coingecko Api
A Node.js wrapper for the CoinGecko API with no dependencies.
Stars: ✭ 159 (-5.36%)
Mutual labels: npm
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;
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].