Animated Scroll Icon

I created simple scroll icon. Here is how:

HTML

<div class="scroll">
    <div id="scrollBtn" class="scroll-border">
        <div class="scroll-dot"></div>
    </div>
</div>

scrollBtn id will be button. This will provide us to scroll bottom.

CSS / Keyframes

/* Scroll icon align */
.scroll {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 40px;
}

/* Scroll icon border */
.scroll-border {
    position: relative;
    border: 3px solid white;
    width: 30px;
    height: 50px;
    border-radius: 25px;
    cursor: pointer;
}

/* Scroll icon dot */
.scroll-dot {
    position: absolute;
    background: white;
    border-radius: 100%;
    width: 8px;
    height: 8px;
    left: 11px;
    top: 7px;
    animation: float 2s ease-in-out infinite;
}

/* Scroll icon align */
@keyframes float {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    25% {
        opacity: 1;
    }

    75% {
        transform: translateY(.75em);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 0;
    }
}

Javascript

function scrollTo(element) {
    window.scroll({
        behavior: 'smooth',
        top: element.offsetTop
    });
}

document.getElementById("scrollBtn").addEventListener('click', () => {
    scrollTo(document.getElementById("{#your-destination-id}"));
});

Result: CodePen