CSS Back to Top Code Example

<a href="#top" target="_self">Back to top</a>

<a href="javascript:scroll(0,0)">JavaScript back to top<s/a>

<a onclick="goScrollTop()">JavaScript slowly slides up</a>

function goScrollTop() {
    //Scroll the content by the specified number of pixels (the first parameter is the number of pixels to scroll right, the second parameter is the number of pixels to scroll down)
    //Upward is negative, downward is positive window.scrollBy(0, -100);
    //Delay recursive call to simulate scrolling up effect scrolldelay = setTimeout('goScrollTop()', 100);
    //Get the scrollTop value. For standard web pages that declare DTD, take document.documentElement.scrollTop. Otherwise, take document.body.scrollTop. Because only one of the two will take effect and the other will always be 0, so taking the sum of the two values ​​can get the real scrollTop value of the web page var sTop = document.documentElement.scrollTop + document.body.scrollTop;
    //Judge when the page reaches the top and cancel the delay code (otherwise the page will not be able to browse the page normally when it scrolls to the top)
    if (sTop == 0) clearTimeout(scrolldelay);
}

<div class="goTop">
    <span>Go</span>
</div>

function goTop(min_height) {
    $(".goTop").click(
        function() {
            $('html,body').animate({
                scrollTop: 0
            }, 700);
        });
    //Get the minimum height of the page. If no value is passed in, the default is 600 pixels min_height=min_height?min_height:400;
    //Bind the processing function for the window's scroll event $(window).scroll(function() {
        //Get the vertical position of the window's scroll bar var s = $(window).scrollTop();
        //When the vertical position of the window's scroll bar is greater than the minimum height of the page, let the return to the top element appear gradually, otherwise fade out if (s > min_height) {
            $(".goTop").fadeIn(100);
        } else {
            $(".goTop").fadeOut(200);
        }
    });
}
 
 
$(function() {
    goTop();
});

.goTop {
    height: 40px;
    width: 40px;
    background: red;
    border-radius: 50px;
    position: fixed;
    top: 90%;
    right: 3%;
    display: none;
}
 
.goTop span {
    color: #fff;
    position: absolute;
    top: 12px;
    left: 8px;
}