An anchor or JavaScript button to scroll the user to top of the current page, or to a target element.
Only use on component per page, multiple "back to top" links are not recommended.
The inline variant can be used without JavaScript and placed at the bottom of content or the page.
The 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.
As of version 1.0.2 vf-back-to-top has experimental Angular support. This package was generated with Angular version 18.2.1 with fallback support for 15.2.4 and has been tested on application with Angular version 18.2.1
- install
yarn add @visual-framework/vf-back-to-top - import in your app.module
import { VfBackToTopAngularModule } from '@visual-framework/vf-back-to-top/vf-back-to-top.angular'; @NgModule({ imports: [VfBackToTopAngularModule, YourOtherModules], ... }) - can be used as
<vf-back-to-top [type]="'inline'" [text]="'Top'" [scrollToId]="'top'" [example]="true"></vf-back-to-top> <vf-back-to-top [type]="'floating'" [example]="false"></vf-back-to-top> - add to your styles.scss
you should also install vf-sass-starter for the styles@import '../node_modules/@visual-framework/vf-sass-config/index.scss'; @import "../node_modules/@visual-framework/vf-back-to-top/vf-back-to-top.scss";
Usage:
<vf-back-to-top [type]="'inline'" [text]="'Top'" [scrollToId]="'top'" [example]="true"></vf-back-to-top>
<vf-back-to-top [type]="'floating'" [example]="false"></vf-back-to-top>
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
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 itThe 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