Create Scroll To Top Button For Your Project

Jump To Right Section 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…

Scroll to Top Button for your asp.net project

The article was published on May 10, 2018 @ 10:15 AM

4 Comments

Annabelle Curries says:

September 30, 2021 at 3:47 PM

Great – I should certainly be impressed with your site. I had no trouble navigating through all the tabs and related info ended up being truly easy to do to access. I recently found what I hoped for before you know it at all. Nice task.

Dean Blanco says:

June 28, 2021 at 6:37 AM

Very nice post. I just stumbled upon your weblog and wanted to say that I have truly enjoyed surfing around your blog posts.
After all, I will be subscribing to your feed and I hope you write again very soon!

Genesis Jackh says:

June 28, 2021 at 2:40 AM

Hi! I just would like to give you a big thumbs up for the excellent info you have got here on this post. I will be returning to your site for more soon.

chazingtime says:

July 7, 2020 at 11:47 AM

I lіke the helpful informаtion yоu supply іn your articles. І wіll bookmark yоur blog and test again һere frequently. Good luck fоr tһe followіng!