Skip to content

Latest commit

 

History

History
52 lines (42 loc) · 1.76 KB

README.md

File metadata and controls

52 lines (42 loc) · 1.76 KB
Raw

BackToTop

BackToTop is a package with no dependencies to make simple "back to top" buttons.

Table of Contents

Install

Installing with npm:

npm i @axn/backtotop

Usage

BackToTop makes use of ESM exports. Most bundlers can import the module directly like so:

import * as BackToTop from '@axn/backtotop';

const element = document.querySelector('#back-to-top');
const button = BackToTop.applyToElement(element, {
    animationInDuration: 1000
});

// Destroy BackToTop when you're done
button.destroy();

For a full example, see floating-button.html.

Docs

applyToElement(element, [options]) {#docs-applytoelement}

Enables BackToTop events on an element.

  • element The element to apply BackToTop to.
  • options optional
    • yThreshold optional Minimum scroll position in pixels before element appears.
    • animationInDuration optional Duration of fade-in animation in milliseconds.
    • animationOutDuration optional Duration of fade-out animation in milliseconds.
    • scrollBehavior optional Scrolling method to use. Possible values: auto, instant, smooth.
    • animationIn optional Fade-in animation name.
    • animationOut optional Fade-out animation name.

Note

When applyToElement() is first called, BackToTop injects it's own stylesheet inside <head> with ID backtotop-style. This is to provide the default fade-in and fade-out animations.

License

See LICENSE