vanilla-back-to-top

Vanilla Back To Top

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

Works great with frameworks (React, Angular, Vue etc) and without them, for example, on pre-rendered static websites like Jekyll, Hugo or Hexo

How to use

Global standalone

This is the simplest way to use it, works great with static or non-SPA websites.

Add this to your HTML:

<script src="https://unpkg.com/vanilla-back-to-top@4.1.0/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 single-page apps on React, Angular, Vue etc, or generally with any asset pipeline.

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 customise CSS of the button using #back-to-top selector:

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

More options

addBackToTop function can be called with many options:

addBackToTop({
  id: 'back-to-top',
  showWhenScrollTopIs: 300,
  onClickScrollTo: 0,
  innerElement: document.createTextNode('Up'),
  size: 50,
  fontSize: 14,
  cornerOffset: 20,
  backgroundColor: '#000',
  textColor: '#fff',
  zIndex: 1,
  scrollContainer: document.documentElement
})

^ All these are also default values.

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
innerElement	DOM element to put inside the button; with jQuery you can put something like this: $('<svg>...</svg>').get(0)
size	Width and height of the button in pixels
fontSize	Font size of the text inside the button
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
scrollContainer	If only part of your website gets scrolled, e.g., when your sidebar never scrolls with content, put the scrolled DOM element here

★ Star me on GitHub