Git Product home page Git Product logo

vue-backtotop's People

Contributors

caiofsouza avatar darkridder avatar superpikar avatar utlime avatar ventralnet avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

vue-backtotop's Issues

Provide a dist javascript file of this library

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 function and does not clean up

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

About vue-version

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.

Doesn't work on other elements but body

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!

Do <back-to-top></back-to-top> tag do not allow @click="" or running any method?

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.

Uncaught ReferenceError: _Fa3J is not defined

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>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.