vanilla-back-to-top-custom/EXAMPLES.md

Simple and tiny Back To Top button with no dependencies. Hides when on top, scrolls up smoothly when clicked. Works equally great with Vue, React, Angular and without frameworks on Jekyll, Hugo and Hexo

# Examples

<img src="https://github.com/Rianvy/vanilla-back-to-top-custom/blob/main/examples/images/default.png" width="66"/> (default)<br/>
```html
<script>addBackToTop()</script>
```


----------


<img src="https://github.com/Rianvy/vanilla-back-to-top-custom/blob/main/examples/images/coral.png" width="66" /><br/>
```html
<script>addBackToTop({
  diameter: 56,
  backgroundColor: 'rgb(255, 82, 82)',
  textColor: '#fff'
})</script>
```


----------


<img src="https://github.com/Rianvy/vanilla-back-to-top-custom/blob/main/examples/images/smaller.png" width="57" /><br/>
```html
<script>addBackToTop({
  diameter: 40,
  backgroundColor: '#ddd',
  textColor: 'red'
})</script>
```


----------


<img src="https://github.com/Rianvy/vanilla-back-to-top-custom/blob/main/examples/images/rectangle.png" width="121" /><br/>
```html
<script>addBackToTop({
  backgroundColor: '#fff',
  innerHTML: 'Back to Top',
  textColor: '#333'
})</script>
<style>
  #back-to-top {
    border: 1px solid #ccc;
    border-radius: 0;
    font-family: sans-serif;
    font-size: 14px;
    width: 100px;
    text-align: center;
    line-height: 30px;
    height: 30px;
  }
</style>
```


----------


<img src="https://github.com/Rianvy/vanilla-back-to-top-custom/blob/main/examples/images/different-arrow.png" width="72" /><br/>
```html
<script>addBackToTop({
  backgroundColor: '#ffda0c',
  innerHTML: '<svg viewBox="0 0 24 24"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>',
  textColor: '#96071f'
})</script>
```