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, 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@5.0.1/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., on 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 a {
  text-indent: -9999px;
  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 SVG icon instead of ^ character:

var backToTopSvg = document.createElement('span');
backToTopSvg.innerHTML = '<svg height="100%" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" focusable="false"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="white"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>';
addBackToTop({
  innerElement: backToTopSvg
});

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,
  onClickScrollTo: 0,
  scrollDuration: 100,
  innerElement: document.createTextNode('^'),
  size: 56,
  cornerOffset: 20,
  backgroundColor: '#000',
  textColor: '#fff',
  zIndex: 1,
  scrollContainer: document.documentElement
})

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