# Back to Top Button

> Adds a small round button in the bottom corner that appears after scrolling down and takes visitors back to the top of the page.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: html, javascript, ux, navigation
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/back-to-top-button/

## Code

```html
<button type="button" id="wpide-back-to-top" aria-label="Back to top" hidden>&#8593;</button>
<style>
#wpide-back-to-top{position:fixed;right:20px;bottom:20px;z-index:9999;width:44px;height:44px;border:0;border-radius:50%;background:#1e1e1e;color:#fff;font-size:20px;line-height:44px;cursor:pointer;opacity:.8;box-shadow:0 2px 8px rgba(0,0,0,.2);}
#wpide-back-to-top:hover,#wpide-back-to-top:focus{opacity:1;}
</style>
<script>
(function () {
    var button = document.getElementById('wpide-back-to-top');
    if (!button) { return; }
    var toggle = function () { button.hidden = window.pageYOffset < 400; };
    window.addEventListener('scroll', toggle, { passive: true });
    button.addEventListener('click', function () {
        var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
        window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' });
    });
    toggle();
})();
</script>
```

## Notes

Change the colors in the style block to match your theme.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Back to Top Button" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/