Deerdama / vue-top-scroll

vue-top-scroll

Simple customizable Vue component to add anywhere for a responsive "back to top" button.

Installation

npm i vue-top-scroll

Basic Usage

• Register the component in your main app.js or equivalent file, eg:

import TopScroll from 'vue-top-scroll';

Vue.component('top-scroll', TopScroll);

• Once registered you can just add it to any component

<top-scroll></top-scroll>

• The look and behavior can be modified by passing different props (see available props for details)

• By default it uses font awesome 5 far fa-angle-up icon but you can pass an icon prop with anything else

Available props

You can either use the component as it is or pass some extra arguments in case you want to customize it. None of the props is required

Name	Default	Type	Description
color	#e91e63	String	The button background color
icon	far fa-angle-up	String	The button icon
size	60px	String	Size of the button
font	32px	String	Icon font-size
fontcolor	#fff	String	Icon color
visibleoffset	600	[String, Number]	Offset (pageYOffset) from top of when the icon should show up
right	50px	String	Position from the right edge
bottom	80px	String	Position from the bottom

• Customized example

<top-scroll color="#0091ea"
            icon="glyphicon glyphicon-chevron-up"
            size="50px"
            font="25px"
            fontcolor="#000"
            visibleoffset="900"
            right="10px"
            bottom="30px">
</top-scroll>