caiofsouza / vue-backtotop Goto Github PK
View Code? Open in Web Editor NEWA Back-to-top component for Vue.js, which scroll page to the top when clicked
Home Page: https://caiofsouza.github.io/vue-backtotop/example/
License: MIT License
A Back-to-top component for Vue.js, which scroll page to the top when clicked
Home Page: https://caiofsouza.github.io/vue-backtotop/example/
License: MIT License
Could you please provide a dist javascript file of this library for use when you simply want to link a javascript file in a html page.
For example:
<script src="vue-backtotop.js"></script>
I understand that everything is moving to npm and will be more optimised that way, but some of us still prefer development without a build system like webpack.
Thanks
The library overrides the native handler for onscroll by doing
window.onscroll = catchScroll;
This means, no other events can be attached to the window scrolling apart from the library one.
The way to do it properly is with
window.addEventListener('scroll', catchScroll);
This is not supported on IE8 and below but in the year 2018, it's no longer an issue.
The library should remove all event listeners when the element is destroyed, otherwise its always in memory, consuming resources.
Given the first problem solution this should be done on the Vue destroy lifecycle hook like this
destroyed(){
window.removeEventListener('scroll', catchScroll);
}
How to use with Nuxt JS ?
Can anyone share an example code?
Hello caiofsouza,
Your component is very well, but i suggest you'd better install vue as devDependencies rather than dependencies or write it in render functions, or it will cause mismatch between vue and developper's vue-template-compiler.
I think everyone like customize this property
Otherwise I end up with two Vue dependencies
Hi!
Can you please add support of optional scrollable element?
I think this can be achieved by simple check if, for example, prop "parentId" is not empty and then if not - use document.getElementById(this.parentId).scrollTop and document.getElementById(this.parentId).offsetHeight instead document.body.scrollTop and document.body.offsetHeight respectively.
I'm not sure if there's gonna be some problems with this solution, but it worked for me.
Huge thanks for plugin, btw!
tag does not seems to allow @click="" or running any method.
I suppose it's purposefully made this way? I'm using vue.js + Visual Code Studio.
<back-to-top class="btn btn-to-top" bottom="50px" right="50px" visibleoffset="1700" @click="whateverMethod">
<i class="fa fa-chevron-up"></i>
</back-to-top>
I don't seems to be able to get any value from the button tag, aside from the tag.
well; is true that I could somehow add a div or a square big enough as a work around, I think. Am a newbie; so ya.
Just thought of confirming.
I would like to propose a feature request to emit and event when scroll top top is triggered. I can submit a pull request in a little bit with the implementation
Prop "visibleoffset" is passed to component BackToTop, but the declared prop name is "visibleOffset". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates.
You should probably use "visible-offset" instead of "visibleOffset".
Vue packages version mismatch: - [email protected] - [email protected]
Hi, i installed this and am seeing the following console error, any ideas?
Uncaught ReferenceError: _Fa3J is not defined
at Object.eval (selector.js?type=script&index=0!./node_modules/vue-backtotop/src/BackToTop.vue:93)
at F (selector.js?type=script&index=0!./node_modules/vue-backtotop/src/BackToTop.vue:78)
at eval (selector.js?type=script&index=0!./node_modules/vue-backtotop/src/BackToTop.vue:91)
at eval (selector.js?type=script&index=0!./node_modules/vue-backtotop/src/BackToTop.vue:92)
at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/vue-backtotop/src/BackToTop.vue (app.js:956)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
at eval (BackToTop.vue:1)
at Object../node_modules/vue-backtotop/src/BackToTop.vue (app.js:1914)
at __webpack_require__ (app.js:679)
Per the directions
import BackToTop from 'vue-backtotop'
...
},
components: { BackToTop }
...
and the rest:
<template>
<div id="app">
<router-view :results="results" :names="names" />
<back-to-top text="Back to top"></back-to-top>
</div>
</template>
The scrolling back to top becomes extremely slow if you have the following rule in your CSS—
html { scroll-behavior : smooth; }
.
It takes about four seconds to scroll back to the top with this CSS rule.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.