back-top

back-top

Simple disappearing back-to-top button.

No external dependencies, optional ES2015 module support, no CSS imports needed.

Comes with almost no styling, allowing you to style it yourself.

Note: This library does not include smooth scrolling.

You can use scroll-behavior, but this does not yet have wide browser support. http://caniuse.com/#feat=css-scroll-behavior

body {
  scroll-behavior: smooth;
}

Alternately, you can use something like https://github.com/tsuyoshiwada/sweet-scroll.

Installation

npm install back-top

ES2015:

import backTop from 'back-top';

CommonJS:

var backTop = require('back-top');

Browser Globals:

<script src="path/to/back-top.js"></script>

Usage

backTop must be manually initialized.

// Basic Usage:
backTop();

// Can pass options:
backTop({
  innerHTML: 'Up you go!',
  id: 'backToTop',
  className: 'btn btn-secondary',
  offset: '5px',
  transition: {
    duration: 1000,
    timingFunction: 'ease',
  },
});

Options

• innerHTML (String) Set the innerHTML of the button. Default is Back to Top.
• id (String) Set the id of the button. By default, no id is set.
• className (String) Set the class name (or space-separated list of class names) to apply to the button. By default, none are set.
• offset (String) Distance from bottom-right to absolutely position the button. Default is 1rem.
• transition (Object) Settings related to the CSS transition of moving the button on and off the screen.
  • duration (Number) Time, in milliseconds, that the transition should take. Default is 800.
  • timingFunction (String) A valid CSS <single-transition-timing-function> string. Default is linear.

Browser Support

Should support IE10+ and all modern browsers.

License

ISC