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

Category: Animation , Javascript , Recommended | November 12, 2018
Author:vfeskov
Views Total:451 views
Official Page:Go to website
Last Update:November 12, 2018
License:MIT

Preview:

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

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
})

You Might Be Interested In:


Leave a Reply