I Am a Child of God: Back to Top Button with Clock float

Alright, so this one will work if you have a long blog reading and want to scroll back to the top in an instant. Then use this code that helps you with your task. The good part is that it also has a working clock, so you won't miss some important event while reading the article.

Check out the bottom right of this article

Copy the Code here and paste it on your blog.

Floating Back-to-Top Button + Digital Clock

Copy the complete code below and paste it into your Blogger HTML/JavaScript gadget. The code includes a 12-hour digital clock with seconds and a floating Back-to-Top button.

<style>

#bb-floating-clock {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2147483647;
    font-family: Arial, Helvetica, sans-serif;
}

#bb-top-button {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 15px 0 8px;
    border: 0;
    border-radius: 30px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(0,0,0,.30);
    outline: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

#bb-top-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,.38);
}

#bb-top-button:active {
    transform: translateY(0);
}

/* Arrow */
#bb-arrow {
    width: 34px;
    height: 34px;
    flex-shrink: 0;

display: flex;
    align-items: center;
    justify-content: center;

border-radius: 50%;
    background: rgba(255,255,255,.20);

font-size: 25px;
    font-weight: bold;
    line-height: 1;
}

/* Clock */
#bb-clock {
    margin-left: 8px;

min-width: 90px;

font-family: "Courier New", monospace;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: .5px;

color: #fff;
    white-space: nowrap;
}

/* Mobile */
@media screen and (max-width:600px) {

#bb-floating-clock {
        right: 12px;
        bottom: 12px;
    }

#bb-top-button {
        height: 44px;
        padding: 0 11px 0 7px;
    }

#bb-arrow {
        width: 31px;
        height: 31px;
        font-size: 22px;
    }

#bb-clock {
        min-width: 80px;
        margin-left: 6px;
        font-size: 12px;
    }
}
</style>

function updateClock() {
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();

/* AM / PM */
            var ampm = hours >= 12 ? "PM" : "AM";

/* Convert 24-hour to 12-hour */
            hours = hours % 12;
            if (hours === 0) {
                hours = 12;
            }

/* Build time */
            var time =
                twoDigits(hours) +
                ":" +
                twoDigits(minutes) +
                ":" +
                twoDigits(seconds) +
                " " +
                ampm;

clock.innerHTML = time;
        }

updateClock();
        setInterval(updateClock, 1000);
        button.onclick = function () {
            window.scrollTo({
                top: 0,
                behavior: "smooth"
            });
        };
    }

if (document.readyState === "loading") {
        document.addEventListener(
            "DOMContentLoaded",
            startFloatingClock
        );
    } else {
        startFloatingClock();
    }
})();
</script>

Back to Top Button with Clock float

No comments: