How to Create a Basic Minimal Scroll To Top Website Animation Button?

Greetings! I was implementing this scroll-to-top button with animation scrolling feature in a website and was searching for an easy example. All examples that I found had a lot of extra customization. So, here in this post, I removed those customization and providing a real basic/minimal scroll-to-top with animation feature. You can have a look.

1. Prerequisite

1. Basic knowledge of HTML, CSS, and JS.
2. An HTML based page to work on.
3. And of course a machine. 🙂

2. Add Basic HTML Button

We put this button near to the end of the webpage contents. But you may put this as per your requirement.

<button·onclick="scrollToTop()"·title="Back to Top">Back to Top</Button>

3. Add Basic JQuery Source & Script

Include this script in your footer. And that’s it!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
<script>
    function scrollToTop() {
        $([document.documentElement, document.body]).animate({
            scrollTop: 0
        }, 1000);
    }
</script>

4. Best Solution without animation

<a name="top"></a>
<!--content here-->
<a href="#top">Back to top</a>

Source: https://stackoverflow.com/questions/32102747/how-to-make-a-back-to-top-button-using-css-and-html-only

5. More Customized Examples

1. https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
2. https://getflywheel.com/layout/sticky-back-to-top-button-tutorial/
3. https://html-online.com/articles/dynamic-scroll-back-top-page-button-javascript/
4. Please comment below more examples, I’ll be happy to append them here in the list. 🙂

6. Conclusion

Hurray! It was easy and simple. Isn’t it? You can always customize the look of that button with CSS, but basic functionality can be achieve with HTML and JQuery.

Thanks for reading!
Hope you got something useful here.
See you in the next post!

PS: Life is simple, keep it simple 🙂

• All
• webdev