<scroll-top>

A custom element that scrolls to the top of the page. The element is not visible until the user scrolls down a specified amount of pixels.

Example

Scroll down to reveal the "Back to Top" button.

HTML

<scroll-top visible-after="200px" smooth-scrolling>
  Back to top
</scroll-top>

CSS

/* Customize styling */
scroll-top::part(button) {
  /* Custom stylings for button */
  background-color: #0d6efd;
  border: 1px solid #0d6efd;
  color: #ffffff;
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  transition: all 0.3s ease-in-out;
}

scroll-top::part(button):hover {
  /* Custom stylings for button's hover state */
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

scroll-top::part(button button--hidden) {
  /* Custom stylings for hidden state */
  transform: translateY(calc(100% + 16px));
}

Source

Source code can be found in Github repository.

License

The MIT License (MIT)