How to Add Scroll to Top Button with Smooth Animation in ASP.NET

In this tutorial, I’ll show you how to add a “Scroll to Top” button with CSS and jQuery to your website.

Introduction

This light-weight approach will enhance usability with a “Scroll to Top” or “Back to Top” button will be handled by native CSS3 properties. I am going to assume that you already have hooked jQuery up to your site. The JavaScript should be called below your jQuery script tag to ensure you don’t get an ‘undefined jQuery’ error in your console. I cannot guarantee support for old browsers such as Internet Explorer 10 and below.

Step 1: Add or copy the JavaScript at your website page

    <script type="text/javascript">
        window.onscroll = function () { scrollFunction() };
        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                document.getElementById("myBtn").style.display = "block";
            } else {
                document.getElementById("myBtn").style.display = "none";
            }
        }
        function topFunction() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    </script>

Step 2: Add the styles for the back to top button

<style type="text/css">
        #myBtn {
            display: none;
            position: fixed;
            bottom: 0px;
            right: 10px;
            z-index: 99;
            font-size: 16px;
            border: none;
            outline: none;
            background-color: red;
            color: white;
            cursor: pointer;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 15px;
            padding-right: 15px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }
            #myBtn:hover {
                background-color: #555;
            }
</style>

Step 3: Add the Code for caller button

<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-chevron-up"></i></button>

Thanks in advance for Sharing…

Scroll to Top Button for your asp.net project