Animated Customizable Back To Top Button In Vanilla JavaScript – vanilla-back-to-top

Preview:

Description:

An animated, highly customizable back to top button for scrolling the page to the top. Written in pure (vanilla) JavaScript. Without the need of any 3rd dependencies such as jQuery.

How to use it:

Download and import the vanilla-back-to-top library into the document.

<script src="/dist/vanilla-back-to-top.min.js"></script>

Add a default back to top button to the webpage.

addBackToTop()

Customize back to top button by overriding the following optional settings.

addBackToTop({
  backgroundColor: '#000',
  cornerOffset: 20,
  diameter: 56,
  ease: inOutSine,
  id: 'back-to-top',
  innerHTML: '<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>',
  onClickScrollTo: 0,
  scrollContainer: document.body, // or a DOM element, e.g., document.getElementById('content')
  scrollDuration: 100,
  showWhenScrollTopIs: 1, 
  size: diameter, // alias for diameter
  textColor: '#fff',
  zIndex: 1
})