Class ScrollToTop

Configures the given element as a ScrollToTop widget.

The ScrollToTop widget adds a scroll-to-top button in the lower right corder of the screen (can be changed to bottom left) which scrolls smoothly (and more slowly than the native scroll) back to the top.

The button is only shown when the scroll offset from the top is more than a given configurable amount.

NOTE: Currently the widget only supports fixed positioned button that scrolls the main scrolling element (see settings.mainScrollableElementSelector).

IMPORTANT: You should not instantiate more than one ScrollToTop widget on a given element. Use ScrollToTop.get to get an existing instance if any. If there is already a widget instance, it will be destroyed!

You can use the following dynamic attributes or CSS properties in your stylesheet:

The following dynamic attributes are set on the element:

  • data-lisn-place: "left" or "right"

To use with auto-widgets (HTML API) (see settings.autoWidgets), the following CSS classes or data attributes are recognized:

  • lisn-scroll-to-top class or data-lisn-scroll-to-top attribute set on the element that constitutes the widget. The element should be empty.

See below examples for what values you can use set for the data attributes in order to modify the configuration of the automatically created widget.

Example

This will create a scroll-to-top button using the JavaScript API.

This will work even if settings.autoWidgets) is false.

<!-- LISN should be loaded beforehand -->
<script>
  LISN.widgets.ScrollToTop.enableMain({
    position: "left",
    offset: "top: 300vh"
  });
</script>

You can customise the offset show/hide trigger via CSS as well as long as ScrollToTopConfig.offset is left at its default value which uses this CSS property:

<style type="text/css" media="screen">
  :root {
    --lisn-scroll-to-top--offset: 300vh;
  }
</style>

Example

This will create a scroll-to-top button for the main scrolling element using an existing element for the button with default ScrollToTopConfig.

<div class="lisn-scroll-to-top"></div>

Example

As above but with custom settings.

<div data-lisn-scroll-to-top="position=left | offset=top:300vh"></div>

Hierarchy (View Summary)

Methods

enableMain get register

Constructors

constructor

Properties

destroy disable enable getElement isDestroyed isDisabled onDestroy onDisable onEnable toggleEnable

Methods

StaticenableMain

Staticget

Staticregister

Constructors

constructor

Properties

Readonlydestroy

destroy: () => Promise<void>

Undoes all modifications to the element and returns it to its original state.

You will need to recreate it if you want to enable its functionality again.

Readonlydisable

disable: () => Promise<void>

Disables the functionality of the widget. What this means is specific to each widget.

Readonlyenable

enable: () => Promise<void>

Re-enables the functionality of the widget. What this means is specific to each widget.

ReadonlygetElement

getElement: () => Element

Returns the element passed to the widget constructor.

ReadonlyisDestroyed

isDestroyed: () => boolean

Returns true if the widget is destroyed.

ReadonlyisDisabled

isDisabled: () => boolean

Returns true if the widget is currently disabled.

ReadonlyonDestroy

onDestroy: (handler: WidgetHandler) => void

The given handler will be called when the widget is destroyed.

ReadonlyonDisable

onDisable: (handler: WidgetHandler) => void

The given handler will be called when the widget is disabled.

ReadonlyonEnable

onEnable: (handler: WidgetHandler) => void

The given handler will be called when the widget is enabled.

ReadonlytoggleEnable

toggleEnable: () => Promise<void>

Re-enables the widget if disabled, otherwise disables it.

Settings

Member Visibility

On This Page

Methods
Constructors
Properties