Go To Top

Go To Top

The go to top button appears after the visitor scrolls down and smoothly returns them to the top of the page when clicked. In Canvas it is a single #gotoTop element you place just before the closing scripts.

Structure

#gotoTop is a self contained element. The icon is applied through the class (an icon font class such as .bi-arrow-up or .uil uil-angle-up), so the element needs no inner markup.

<div id="gotoTop" class="bi-arrow-up"></div>

You can style it further with Canvas utility classes:

<div id="gotoTop" class="bi-arrow-up bg-white box-shadow h-shadow-sm text-dark rounded-circle all-ts"></div>

Or with the Unicons angle up icon and a rounded shape:

<div id="gotoTop" class="uil uil-angle-up rounded" data-mobile="true" style="--cnvs-gotoTop-bg:var(--cnvs-contrast-800)"></div>

Options

The behaviour is controlled by data-* attributes read by the script:

• data-mobile: set to true to keep the button active on mobile devices.
• data-offset: scroll distance in pixels before the button appears.
• data-speed: scroll animation duration in milliseconds.
• data-easing: easing function name for the scroll animation.

<div id="gotoTop" class="bi-arrow-up" data-mobile="true" data-offset="0"></div>

Styling

The background color can be themed with the --cnvs-gotoTop-bg CSS variable via an inline style, so you do not need custom CSS:

<div id="gotoTop" class="rounded" style="--cnvs-gotoTop-bg:var(--cnvs-contrast-800)"></div>

Tips

• Place #gotoTop near the end of the body, just before the plugin and functions scripts.
• The icon comes from the class, so swap .bi-arrow-up for any Bootstrap Icons or Unicons class to change the glyph.
• Set data-mobile="true" if you want the button on touch devices; leave it off to hide it on small screens.
• Use data-offset to control how far the user scrolls before the button fades in.