back-top

1.0.0 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i back-top

Weekly Downloads

686

Version

1.0.0

License

ISC

Unpacked Size

26.6 kB

Total Files

12

Last publish

Collaborators

  • ryanzim