This Web Component scrolls the page to the top upon clicking the toast notification. The notification will display once a certain scroll depth is reached and remain visible from this point onwards. For very long pages this is a quick shorcut to the top of the page rather than having to use the scroll bar which can be cumbersome.

npm i scroll-to-top-wc

import "scroll-to-top-wc";

<scroll-to-top-wc></scroll-to-top-wc>

Use the activatewhen property to determine when the toast notification is shown. This value is in pixels and by default is set to 200. The below will mean we need to scroll down twice as far before the toast notification is shown

<scroll-to-top-wc activatewhen="400"></scroll-to-top-wc>

The text displayed by the toast notification can be customised using light DOM nodes as below. Note that we need to specify SLOT='TEXT' for the node that will display the text on the toast notification

<scroll-to-top-wc>
  <div slot="text">Move this to the top3</div>
</scroll-to-top-wc>

In order for the page to scroll to the top in a smooth fasion you will need to apply the below CSS to the document body:

scroll-behavior: smooth;

The component can be styled using CSS Shadow Parts. The part 'container' can be selected to allow any CSS to be applied as shown in the below example:

 scroll-to-top-wc::part(container) {
        background: blue;
        border: 5px solid black;
      }

For browsers that do not support CSS Shadow Parts, the below CSS Custom Properties can be set to style a limited part of the component:

--scroll-top-background-color
--scroll-top-color

Clone the repository with the below:

git clone https://github.com/MarkJamesHoward/ScrollToTop.git

install dependencies

npm install

Then open the 'index.html' in the demo folder using parcel

npm i -g parcel
cd \demo
parcel index.html

To include this component via Unpkg please use one of the below links:

UnPkg Link

UnPkg Link

This package was created using @Pika/Pack. So we have an unbundled ES2018 and Web optimised versions in the repository. Within the package.json there is a 'module' entry that points to the web optimsed version which should be picked up by bundlers such as Rollup, webpack, parcel etc.