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

Library overrides native window onscroll

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.

Library does not clean up

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.