How TO Create Scroll Back To Top Button Using JavaScript

admin_img Posted By Bajarangi soft , Posted On 05-10-2020

In Java script we can scroll back on click of button so today we discuss how to create scroll back to top button using java script

How TO Create Scroll Back To Top Button Using JavaScript

Create a button that will take the user to the top of the page


Step 1: Create index.html file and implement below code in it.
 

<button onclick="topFunction()" id="Btn" title="Go to top">Top</button>

Step 2:Now we create css code for display button so implement below code in index.html file
<style>
    h1 {
        color: red;
    }

     body {
         font-family: Arial, Helvetica, sans-serif;
         font-size: 20px;
     }

    #Btn {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        font-size: 18px;
        border: none;
        outline: none;
        background-color: red;
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
    }

    #Btn:hover {
        background-color: #555;
    }
</style>


Step 3:Now we implement javascript to scroll back to top of page.

<script>
    //Get the button
    var mybutton = document.getElementById("Btn");

    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            mybutton.style.display = "block";
        } else {
            mybutton.style.display = "none";
        }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>

Complete Code for Creating Scroll Back To Top Button Using JavaScript
<!DOCTYPE html>
<html>
<head>
    <title> How TO Create Scroll Back To Top Button Using JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1 {
        color: red;
    }

     body {
         font-family: Arial, Helvetica, sans-serif;
         font-size: 20px;
     }
    #Btn {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        font-size: 18px;
        border: none;
        outline: none;
        background-color: red;
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
    }
    #Btn:hover {
        background-color: #555;
    }
</style>

<body>
<div class="container">
    <br>
    <br>
    <div class="text-center">
        <h1> How TO Create Scroll Back To Top Button Using JavaScript</h1>
    </div>
    <br>
    <div class="well">
        <button onclick="topFunction()" id="Btn" title="Go to top">Top</button>

        <div style="background-color:brown;color:white;padding:30px">Scroll Down</div>
        <div style="background-color:lightgrey;padding:30px 30px 2500px">Click Below Button To See Magic.</div>
        <script>
            //Get the button
            var mybutton = document.getElementById("Btn");

            // When the user scrolls down 20px from the top of the document, show the button
            window.onscroll = function() {scrollFunction()};

            function scrollFunction() {
                if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    mybutton.style.display = "block";
                } else {
                    mybutton.style.display = "none";
                }
            }

            // When the user clicks on the button, scroll to the top of the document
            function topFunction() {
                document.body.scrollTop = 0;
                document.documentElement.scrollTop = 0;
            }
        </script>
    </div>
    <div>
</body>
</html>

 

Related Post