React Component for a fixed scroll to top button.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
UITesting Update Testing Sep 13, 2018
cypress Disable Cypress Video Sep 13, 2018
src Update Testing Sep 13, 2018
tests Removed unused modules Sep 13, 2018
.gitignore
.npmignore Added test coverage Jan 18, 2017
.travis.yml remove old node dependencies Sep 13, 2018
CHANGELOG.md update changlog and version number Sep 13, 2018
LICENSE Initial commit Dec 15, 2016
README.md Fixes #5 fixed bad prop name Aug 30, 2018
cypress.json Disable cypress video Sep 13, 2018
package-lock.json Removed unused modules Sep 13, 2018
package.json Removed unused modules Sep 13, 2018

README.md

npm version License Demo Build Status Coverage Status

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.

Install

npm install react-scroll-up-button

Usage

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

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

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