Git Product home page Git Product logo

vue-backtotop's Introduction

Vue Backtotop Component

npm

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

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

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>

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.

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

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

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!

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.