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.
Opens WPIDE on
Code
<button type="button" id="wpide-back-to-top" aria-label="Back to top" hidden>↑</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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.