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;
  }
  .containerWrapper{
    overflow:hidden;
    overflow-y:scroll;
    height:200px
  }
  .toTopButton.scrolled{
    right:85px;
     opacity:1;
  }
  
</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>

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

Slots

Name Description
(default) The default slot.

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.