Implement a beautiful "To Top Button" with Bootstrap and Bootstrap Icons

When you click on the "To Top Button", you will scroll to the top the web page. This tutorial shows how to implement a beautiful "To Top Button". Bootstrap and Bootstrap Icons are used.

Html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Top Button</title>
    <!-- import Bootstrap and Bootstrap Icons -->
    <link href="https://unpkg.com/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/bootstrap-icons@1.8.2/font/bootstrap-icons.css" rel="stylesheet">
</head>

<body style="height: 200vh">
    <button type="button" class="btn btn-danger btn-lg" id="btn-top">
        <i class="bi bi-arrow-up"></i>
    </button>
</body>

</html>

Notice:

  • Two <link> tags import Bootstrap and Bootstrap Icons.
  • <body> is styled with height: 200vh, this makes the web page is high enough to be scrolled.
  • <button> contains <i class="bi bi-arrow-up"></i> which is an arrow icon from Bootstrap Icons.

CSS

#btn-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    padding: 0px;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
}

Notice:

  • position: fixed; bottom: 20px; right: 20px; makes the button always on the right-bottom corner of the webpage.
  • display: none; makes the button not visible initially. That's because, at the beginning, we are already "on the top" and do not need to use this button.
  • Other properties make the button more beautiful.

JS

window.addEventListener('load', function () {
    let btnTop = document.getElementById("btn-top");
    // display the button when user scrolls more than 20px
    window.onscroll = function () {
        if (
            document.body.scrollTop > 20 || document.documentElement.scrollTop > 20
        ) {
            btnTop.style.display = "block";
        } else {
            btnTop.style.display = "none";
        }
    };
    btnTop.addEventListener("click", function () {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    });
})

Notice: document.body.scrollTop and document.documentElement.scrollTop are the same, they are both used for compatibility.

Put it together

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Top Button</title>
    <link href="https://unpkg.com/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/bootstrap-icons@1.8.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        #btn-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: none;
            padding: 0px;
            border-radius: 50%;
            width: 3rem;
            height: 3rem;
        }
    </style>
    <script>
        window.addEventListener('load', function () {
            let btnTop = document.getElementById("btn-top");
            // display the button when user scrolls more than 20px
            window.onscroll = function () {
                if (
                    document.body.scrollTop > 20 || document.documentElement.scrollTop > 20
                ) {
                    btnTop.style.display = "block";
                } else {
                    btnTop.style.display = "none";
                }
            };
            btnTop.addEventListener("click", function () {
                document.body.scrollTop = 0;
                document.documentElement.scrollTop = 0;
            });
        })
    </script>
</head>

<body style="height: 200vh">
    <button type="button" class="btn btn-danger btn-lg" id="btn-top">
        <i class="bi bi-arrow-up"></i>
    </button>
</body>

</html>

This article is originally created by tooli.top. Please indicate the source when reprinting : https://www.tooli.top/posts/bootstrap_button_top

Posted on 2022-05-23 Mail to author

Navigator