Back to Top

<a href="#" class="back-to-top" id="back-to-top">↑</a>   

<style>

    .back-to-top {

    position: fixed;

    bottom: 20px;

    right: 20px;

    background-color: ivory;

    opacity: .75;

    font-weight: bold;

    font-size: 1rem;

    text-transform: uppercase;

    padding: 5px 10px;

    border: 1px solid;

    border-radius: 50%;

    text-decoration: none;

    display: none; /* Hidden by default */

    z-index: 99;

}   

</style>

<script>

document.addEventListener("DOMContentLoaded", function() {

    var btn = document.getElementById("back-to-top");

    window.addEventListener("scroll", function() {

        if (window.scrollY > 300) {

            btn.style.display = "block";

        } else {

            btn.style.display = "none";

        }

    });

    btn.addEventListener("click", function(e) {

        e.preventDefault();

        window.scrollTo({ top: 0, behavior: "smooth" });

    });

});

</script>