Light Dark System
Get ready for more awesome! Web Awesome, the next iteration of Shoelace, is on Kickstarter. Read Our Story

Back To Top

<sl-back-to-top> | SlBackToTop
since ViUR 0.5 experimental

A description of the component goes here.

scroll down…
<div id="scroller" style="overflow-y:scroll;height:200px">
  <div style="height:1000px"> scroll down...</div>
  <sl-back-to-top target="#scroller"></sl-back-to-top>
</div>

Examples

Custom Button

scroll down…
top 
<div id="scroller2" style="overflow-y:scroll;height:200px">
  <div style="height:1000px"> scroll down...</div>
  <sl-back-to-top target="#scroller2">
  <sl-button>top</sl-button>
  </sl-back-to-top>
</div>

Static Position

scroll down…
<div id="scroller3" style="overflow-y:scroll;height:200px">
  <div style="height:1000px"> scroll down...</div>
  <sl-back-to-top target="#scroller3" style="position:absolute;bottom:35px;right:85px"></sl-back-to-top>
</div>

Static Positon and hide on Top

scroll down…
<style>
  .toTopButton{
    position:absolute;
    bottom:35px;
    right:-10px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  .containerWrapper{
    overflow:hidden;
    overflow-y:scroll;
    height:200px
  }
  .toTopButton.scrolled{
    right:85px;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  
</style>
<div id="scroller4" class="containerWrapper">
  <div style="height:1000px"> scroll down...</div>
  <sl-back-to-top target="#scroller4" class="toTopButton"></sl-back-to-top>
</div>

Pairing opacity with visibility and pointer-events (not opacity alone) keeps the hidden button out of the tab order and the accessibility tree, and prevents clicking through an invisible element.

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@viur/shoelace@1.0.16-v2.20.1/cdn/components/back-to-top/back-to-top.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@viur/shoelace@1.0.16-v2.20.1/cdn/components/back-to-top/back-to-top.js';

To import this component using a bundler:

import '@viur/shoelace/dist/components/back-to-top/back-to-top.js';

To import this component as a React component:

import SlBackToTop from '@viur/shoelace/dist/react/back-to-top';

Slots

Name Description
(default) The default slot. Content must be focusable and keyboard-operable (e.g. a button): clicks are handled on the wrapper via bubbling, there is no separate keyboard fallback for non-interactive slotted content.

Learn more about using slots.

Properties

Name Description Reflects Type Default
target selector for scroll target string "html"
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
wrapper The component’s base wrapper.

Learn more about customizing CSS parts.