https://github.com/vfeskov/vanilla-back-to-top

Simple and smooth Back To Top button
https://github.com/vfeskov/vanilla-back-to-top

angular autoprefixer babel babel-preset-env back-top browserslist button configurable hexo hugo jekyll material postcss pure react scroll static-site-generator vanilla vue zero-dependency

Last synced: about 21 hours ago
JSON representation

Simple and smooth Back To Top button

• Host: GitHub
• URL: https://github.com/vfeskov/vanilla-back-to-top
• Owner: vfeskov
• License: mit
• Created: 2017-12-29T17:55:20.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T20:41:00.000Z (about 2 years ago)
• Last Synced: 2025-01-25T08:07:25.768Z (8 days ago)
• Topics: angular, autoprefixer, babel, babel-preset-env, back-top, browserslist, button, configurable, hexo, hugo, jekyll, material, postcss, pure, react, scroll, static-site-generator, vanilla, vue, zero-dependency
• Language: JavaScript
• Homepage:
• Size: 1.25 MB
• Stars: 273
• Watchers: 5
• Forks: 27
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vanilla Back To Top

[![No Dependencies](http://svgshare.com/i/4rU.svg)](https://github.com/vfeskov/vanilla-back-to-top/blob/v7.2.1/package.json)

[![File Size](https://unpkg.com/[email protected]/size-shield.svg)](https://github.com/vfeskov/vanilla-back-to-top/blob/v7.2.1/dist/vanilla-back-to-top.min.js.gz)

[![GitHub stars](https://img.shields.io/github/stars/vfeskov/vanilla-back-to-top.svg?style=social&label=Stars)](https://github.com/vfeskov/vanilla-back-to-top)

Simple and tiny Back To Top button with no dependencies. Hides when on top, scrolls up smoothly when clicked. Works equally great with [Vue](https://vuejs.org/), [React](https://reactjs.org/), [Angular](https://angular.io/) and without frameworks on [Jekyll](https://jekyllrb.com/), [Hugo](https://gohugo.io/) and [Hexo](https://hexo.io)

[](https://github.com/vfeskov/vanilla-back-to-top/blob/v7.2.1/EXAMPLES.md)




[Live demo](https://vfeskov.com/)

## Features

- Hides when on top

- Scrolls up smoothly when clicked

- Up-to-date [Material](https://material.io/)-like user experience

- Compatible with [really old browsers](http://browserl.ist/?q=explorer+%3E%3D9%2Cexplorermobile+%3E%3D10%2Cedge+%3E%3D12%2Cfirefox+%3E%3D2%2Cfirefoxandroid+%3E%3D2%2Cchrome+%3E%3D4%2Csafari+%3E%3D5.1%2Copera+%3E%3D11.5%2Coperamobile+%3E%3D12%2Cchromeandroid+%3E%3D4%2Cios+%3E%3D7.1%2Cucandroid+%3E%3D11.4%2Candroid+%3E%3D3%2Csamsung+%3E%3D4%2Cblackberry+%3E%3D7)

- No dependencies or requirements

- Works great with [Vue](https://vuejs.org/), [React](https://reactjs.org/), [Angular](https://angular.io/) and other frameworks, see [INSTALL](https://github.com/vfeskov/vanilla-back-to-top/blob/v7.2.1/INSTALL.md)

- Works great on static websites with [Jekyll](https://jekyllrb.com/), [Hugo](https://gohugo.io/), [Hexo](https://hexo.io) and others

## How to use

Add this to `` of your HTML:

```html

addBackToTop({

  diameter: 56,

  backgroundColor: 'rgb(255, 82, 82)',

  textColor: '#fff'

})

```

For alternative installation see [INSTALL](https://github.com/vfeskov/vanilla-back-to-top/blob/v7.2.1/INSTALL.md)

See [EXAMPLES](https://github.com/vfeskov/vanilla-back-to-top/blob/v7.2.1/EXAMPLES.md)

For all options see [OPTIONS](https://github.com/vfeskov/vanilla-back-to-top/blob/v7.2.1/OPTIONS.md)

## License

MIT, see [LICENSE](https://github.com/vfeskov/vanilla-back-to-top/blob/v7.2.1/LICENSE)

Default icon from [Material Design Icons](https://material.io/icons/#ic_keyboard_arrow_up) under [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0), which only restricts re-selling the icon

----------

[Support me with a star ♥](https://github.com/vfeskov/vanilla-back-to-top)