Up Button


Should avoid endless scrolling on keyboardless devices on long pages to get back to top.


ToDo

  • show only at min-height larger than screen
  • seems does not hover over debug div, not visible
  • CSS
  • symbol

Unicode symbols
⏶∧^⯅⮉△▲▴⯅⏶⏫⇧⇑⬆🔝


SVG

<svg height="48" viewBox="0 0 48 48" width="48" height="48px" xmlns="http://www.w3.org/2000/svg">
	<path id="scrolltop-bg" d="M0 0h48v48h-48z"></path>
	<path id="scrolltop-arrow" d="M14.83 30.83l9.17-9.17 9.17 9.17 2.83-2.83-12-12-12 12z"></path>
</svg>

1. CSS only

Simpler, less CPU burden.


<nav class="totop-button">
    <a class="chevron-up" href="#top"></a>
</nav>

/* top button */
@media (max-width: 700px) {
    .totop-button {
        right: 20px;
        border-width: 0;
        border-style: solid;
        border-radius: 100%;
        border-color: rgba(255, 255, 255, 1.0);
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        /* right: -100px; */
        bottom: 50px;
        width: 40px;
        height: 40px;
        z-index: 1;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
        color: rgba(255, 255, 255, 1.0);
        background-color: transparent;
        transition: all 0.4s ease;
        cursor: pointer;
    }
    /* △ */
    .chevron-up:before {
        content: "^";
    }
    a.chevron-up,
    a.chevron-up:hover,
    a.chevron-up:visited {
        color: rgb(51, 51, 51);
        text-decoration: none;
        margin-top: 5px;
        font-style: normal;
        line-height: 1;
        font-weight: 900;
        font-size: large;
        width: 100%;
        text-align: center;
    }
}

2. Using JavaScript

https://css-tricks.com/how-to-[...]croll-to-top-button/


<html>
<head>
<style>
    .totop-button {
        right: 20px;
        border-width: 0;
        border-style: solid;
        border-radius: 100%;
        border-color: rgba(255, 255, 255, 1.0);
        display: none; /* At first we hide the button */
        justify-content: space-around;
        align-items: center;
        position: fixed;
        /* right: -100px; */
        bottom: 50px;
        width: 40px;
        height: 40px;
        z-index: 1;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
        color: rgba(255, 255, 255, 1.0);
        background-color: transparent;
        transition: all 0.4s ease;
        cursor: pointer;
    }
    /* △ */
    .chevron-up:before {
        content: "^";
    }
    a.chevron-up,
    a.chevron-up:hover,
    a.chevron-up:visited {
        color: rgb(51, 51, 51);
        text-decoration: none;
        margin-top: 5px;
        font-style: normal;
        line-height: 1;
        font-weight: 900;
        font-size: large;
        width: 100%;
        text-align: center;
    }
}
 
</style>
<script>
 
function ready(callback){
    // in case the document is already rendered
    if (document.readyState!='loading') callback();
    // modern browsers
    else if (document.addEventListener)
document.addEventListener('DOMContentLoaded', callback);
    // IE <= 8
    else document.attachEvent('onreadystatechange', function(){
        if (document.readyState=='complete') callback();
    });
}
 
ready(function(){
    var offset = 250; // Y offset when we start showing the button
    var toTopButton = document.querySelector(".totop-button");
 
    // Show/hide the sctoll top button
    window.addEventListener("scroll", function() {
        if (window.scrollY > offset) {
            toTopButton.style.display = "flex"; // Show button
        } else {
            toTopButton.style.display = "none"; // Hide button
        }
    });
 
    // Click event listener
    toTopButton.addEventListener("click", function(event) {
        event.preventDefault(); // Prevent default action
 
        // Smooth scroll to the top of the page
        window.scrollTo({
            top: 0, // Go to Y offset = 0
            behavior: "smooth" // Nice and smooth 
        });
 
        return false;
    });
});
 
</script>
</head>
<body>
<div style="height:5000px;">
This is a mockup of a long scrolling page.<br>
Scroll it a bit down to see the button in the bottom right corner.
</div>
 
<!-- we put the button before the closing </body> tag or somewhere in the bottom
and use href="#" that allows us to scroll top in older browsers --> 
<nav class="totop-button">
        <a class="chevron-up" href="#"></a>
</nav>
</body>
</html>

3. Patches