vanilla-back-to-top

Vanilla Back To Top

Tiny but highly configurable Back To Top button with no dependencies that will work for basically all users in the world

Works universally great with frameworks - React, Angular, Vue etc, and without them, e.g., on pre-rendered static websites like Jekyll, Hugo or Hexo

Just the button:

How to use

Global declaration

This is the simplest way to use it, works great with classic non modular JavaScript.

Add this to your HTML:

<script src="https://unpkg.com/vanilla-back-to-top@7.0.2/dist/vanilla-back-to-top.min.js"></script>
<script>addBackToTop()</script>

If you don't want to rely on unpkg.com, save the file to your project and serve it from your server:

<script src="/assets/vanilla-back-to-top.min.js"></script>
<script>addBackToTop()</script>

Isolated UMD module

This is how you would use it with a modular app, e.g., with React, Angular, Vue etc

Install the package with npm:

npm install --save vanilla-back-to-top

Import it as ES6, Node.js or RequireJS module, for example:

import { addBackToTop } from 'vanilla-back-to-top'
addBackToTop()
// your Vue/React/Angular/etc bootstrapping code here

Styling

You can change the looks of the button using #back-to-top selector in your CSS:

#back-to-top {
  background-image: url(back-to-top.png)
}
@media screen and (max-width: 479px) {
  #back-to-top {
    right: 10px;
    bottom: 10px;
  }
}

Examples of some options

In addition to styling with CSS, you can call addBackToTop function with many options, these are some examples:

• Change colors:

addBackToTop({
  backgroundColor: 'pink',
  textColor: '#ad19b7'
})

• Change size:

addBackToTop({
  size: 40
})

• Use another SVG icon:

addBackToTop({
  innerHTML: '<svg viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z"/><path fill="#fff" d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>'
});

All options

These are all the options you can possibly provide to addBackToTop function:

// the values are also the default ones, so the call is equivalent to addBackToTop()
addBackToTop({
  id: 'back-to-top',
  showWhenScrollTopIs: 1, // px
  onClickScrollTo: 0, // px
  scrollDuration: 100, // ms
  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>', // https://material.io/icons/#ic_keyboard_arrow_up
  size: 56, // px
  cornerOffset: 20, // px
  backgroundColor: '#000',
  textColor: '#fff',
  zIndex: 1
})

Option	Description
id	id attribute of the button
showWhenScrollTopIs	Show the button when page got scrolled by this number of pixels
onClickScrollTo	Where to scroll to, in pixels, when the button gets clicked, 0 means the very top
scrollDuration	How long, in milliseconds, scrolling to top should take. Set to 0 to make scrolling instant
innerHTML	HTML code to put inside the button
size	Width and height of the button in pixels
cornerOffset	Right and bottom offset of the button relative to viewport
backgroundColor	Background color of the button
textColor	Text color of the button
zIndex	z-index of the button

★ Star me on GitHub