Smooth Fade Scroller
A user experience essential. This script adds a floating "Up" button that only appears when the user scrolls down, providing a quick way to return to the top.
Scroll down this page. You will see a blue arrow button fade in at the bottom right corner.
Scroll content...
...
...
...
...
...
...
...
End of box.
Copy the Script
<button id="topBtn" onclick="window.scrollTo({top: 0, behavior: 'smooth'})" style="display:none; position:fixed; bottom:20px; right:20px;">Top</button>
<script>
var mybutton = document.getElementById("topBtn");
window.onscroll = function() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
};
</script>Frequently Asked Questions
No. Modern JavaScript has `window.scrollTo({ behavior: 'smooth' })`, removing the need for jQuery animations.
Yes. The script checks `window.scrollY`. You can set it to show the button after 200px, 500px, or any value you prefer.
Yes. It is standard practice on mobile to save users from manually swiping all the way back up long pages.