@visual-framework/vf-back-to-top

    1.0.0-alpha.2 • Public • Published

    Back to top component

    npm version

    About

    An anchor or JavaScript button to scroll the user to top of the current page, or to a target element.

    Usage

    Only use on component per page, multiple "back to top" links are not recommended.

    Inline variant

    The inline variant can be used without JavaScript and placed at the bottom of content or the page.

    Floating variant

    Te floating variant is recommended for this component, which appears floating at the bottom right of page. It will appear once the user has scrolled down to 100% of the page height. This requires JavaScript to function.

    Install

    This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and yarn, you can install vf-back-to-top with this command.

    $ yarn add --dev @visual-framework/vf-back-to-top
    

    JS

    You should import this component in ./components/vf-component-rollup/scripts.js or your other JS process:

    import { vfBackToTop } from 'vf-back-to-top/vf-back-to-top';
    // Or import directly
    // import { vfBackToTop } from '../components/raw/vf-back-to-top/vf-back-to-top.js';
    vfBackToTop(); // invoke it

    Sass/CSS

    The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

    @import "@visual-framework/vf-back-to-top/index.scss";
    

    Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

    Help

    Install

    npm i @visual-framework/vf-back-to-top

    DownloadsWeekly Downloads

    0

    Version

    1.0.0-alpha.2

    License

    Apache 2.0

    Unpacked Size

    31.1 kB

    Total Files

    15

    Last publish

    Collaborators

    • khawkins98