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 install react-scroll-up-button

Usage

Default Button:

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

export default class Index extends React.Component {
    render() {
        return (
            <div>
                <ScrollUpButton />
                //This is all you need to get the default view working
            </div>
        );
    }
}

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

    <ScrollUpButton ContainerClassName="MyOverRideClass" TransitionClassName="MyOverRideTransitionedClass"/>

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

    <ScrollUpButton style={{width: 75}} ToggledStyle={{right: 100}}/>

Custom Button:

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

export default class Index extends React.Component {
    render() {
        return (
            <div>
                <ScrollUpButton ContainerClassName="ScrollUpButton__Container" TransitionClassName="ScrollUpButton__Toggled">
                    // 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
                </ScrollUpButton>
            </div>
        );
    }
}

Configuration:

    <ScrollUpButton
      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.

Themed Buttons:

Click on a button to see its code.

Vertical Button | Circle Arrow Button | Tiny Up 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 (
      <div>
        <ScrollUpButton />
      </div>
    );
  }
}

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 (
      <div>
        <ScrollUpButton />
      </div>
    );
  }
}

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 (
      <div>
        <ScrollUpButton />
      </div>
    );
  }
}

More To Come!!

Credit

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.