#gotop(onclick="scrollToTop(1000);")
p Scroll to bottom & Click GoTopBtn
- var n = 0;
while n < 90
    p= n++
View Compiled
body{
    min-height: 3000px;
}
#gotop{
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: #999;
    color: #fff;
    padding: 8px 16px;
    font-size: 20px;
    border-radius: 5px;
    
    &:hover{
        background: #AAA;
        cursor: pointer;
    }
}
View Compiled
function scrollToTop (duration) {
    
    
    if (document.scrollingElement.scrollTop === 0) return;
    
    const totalScrollDistance = document.scrollingElement.scrollTop;
    
    let scrollY = totalScrollDistance, 
        oldTimestamp = null;
    
    function step (newTimestamp) {
        if (oldTimestamp !== null) {
            
            scrollY -= totalScrollDistance * (newTimestamp - oldTimestamp) / duration;
            
            if (scrollY <= 0) return 
            
            document.scrollingElement.scrollTop = 0;
            document.scrollingElement.scrollTop = scrollY;
        }
        oldTimestamp = newTimestamp;
        window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
}

// Ref:https://stackoverflow.com/questions/21474678/scrolltop-animation-without-jquery

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.