![License]()

react-scroll-up-button

React Component for a fixed scroll to top button.
The button can use the default button, or can be customized to look like any button you want.
The component contains all the code neccassary to scroll to the top of the page (Or desired position) Utilizing Easing effects.

I am also adding many different style buttons that you can copy and paste into this component to quickly acheive a style you can appreciate and fits your websites look and feel.

Demo

https://react-scroll-up-button.com

Install

``npm
npm install react-scroll-up-button
`

----

Usage

$3

`jsx
import React from "react";
import ScrollUpButton from "react-scroll-up-button"; //Add this line Here

export default class Index extends React.Component {
render() {
return (


);
}
}

`

Setting Custom Classes to the default button.
This will apply the class names you specify to the scroll-up-button.
`jsx

`

Setting inline styles to the default button.
This will apply the styles to the scroll-up-button.
`jsx

`

----

$3


`jsx
import React from "react";
import ScrollUpButton from "react-scroll-up-button";

export default class Index extends React.Component {
render() {
return (

// Here you can add any react component or jsx
// ScrollButton will apply the classnames given to the container of whatever you put here.
// Changing appearence this way will only work when importing the default ScrollUpButton, importing any of the specific buttons do not except children

);
}
}
`
----

$3

`javascript
StopPosition={0}
ShowAtPosition={150}
EasingType='easeOutCubic'
AnimationDuration={500}
ContainerClassName='ScrollUpButton__Container'
TransitionClassName='ScrollUpButton__Toggled'
style={{}}
ToggledStyle={{}}
/>
`
StopPosition -- PageYOffset in which you want the page to stop at when scrolling up.

ShowAtPosition -- PageYOffset position at which the button will show up.

EasingType -- Easing option see : (https://www.npmjs.com/package/tween-functions) for available options.

AnimationDuration -- Milisecond duration of scrolling up.

ContainerClassName -- Class name applied to the container when NOT using the default view.

TransitionClassName -- Class name applied to the container to show the button when NOT using the default view.

style -- style the container directly with inline styleing, can be used with any imported button.

ToggledStyle -- Style the toggled state of the container directly, can be used with any imported button.

----

$3

Click on a button to see its code.

Vertical Button | Circle Arrow Button | Tiny Up Button
:---: | :---: | :---:
 |  | 

----

#### Vertical Button:
!vertical_button

Vertical_Button | React:
`
import React from "react";
import {VerticleButton as ScrollUpButton} from "react-scroll-up-button"; //Add this line Here

export default class Index extends React.Component {
render() {
return (



);
}
}
`

----

#### Circle Arrow Button:
!circle_arrow_button

Circle_Arrow_Button | React:
`
import React from "react";
import {CircleArrow as ScrollUpButton} from "react-scroll-up-button"; //Add this line Here

export default class Index extends React.Component {
render() {
return (



);
}
}
`

#### Tiny Up Button:
!tiny_up_button

Tiny_Up_Button | React:
`
import React from "react";
import {TinyButton as ScrollUpButton} from "react-scroll-up-button"; //Add this line Here

export default class Index extends React.Component {
render() {
return (



);
}
}
``

$3

----

$3

I was inspired by: https://github.com/milosjanda/react-scroll-up
With the base recource of the repo i was able to create my own in my style with additional functionality.