Create Scroll To Top Button For Your Project

In this article, we'll take a look at Show

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>

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>

#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…

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

Introduction

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

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

Step 3: Add the Code for caller button

Scroll to Top Button for your asp.net project

Leave a Comment X

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

Introduction

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

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

Step 3: Add the Code for caller button

Scroll to Top Button for your asp.net project

You may also like

Leave a Comment X