返回顶部效果

$(function(){
         function $getId(Id) {
            return document.getElementById(Id);
        }
        var goTop = $getId("goTop");
        window.onscroll = function () {
            if (document.documentElement.scrollTop + document.body.scrollTop > 350) {
                goTop.style.display = "";
            } else {
                goTop.style.display = "none";
            }
        }
        goTop.onclick = function () {
            var Timer = setInterval(GoTop, 10);
            function GoTop() {
                if (document.documentElement.scrollTop + document.body.scrollTop < 1) {
                    clearInterval(Timer);
                } else {
                    document.documentElement.scrollTop /= 1.1;
                    document.body.scrollTop /= 1.1;
                }
            }
        }
    })

#goTop{
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 40px;
        height: 32px;
        padding: 8px 0 0; 
        background-color: #69c;
        border-radius: 6px;
        cursor: pointer;
    }
    #goTop .gotop1 {
        width: 0;
        margin: 0 auto;
        border-bottom: 12px solid #FFF;
        border-left: 12px solid #69c;
        border-right: 12px solid #69c;
    }
    #goTop .gotop2 {
        width: 10px;
        height: 10px;
        margin: 0 auto;
        background-color: #FFF;
    }

<div title="返回顶部" id="goTop" style="">
        <div class="gotop1"></div>
        <div class="gotop2"></div>
</div>

转载于:https://blog.51cto.com/lflianglan/1208798