通用 gotop 返回顶部js


通用 gotop 返回顶部js 

直接引入页面即可,基于jquery

<script type="text/javascript" src="/lib/js/jquery.js"></script>
<script type="text/javascript" src="/lib/js/gotop.js"></script>


代码:


/**
 * 通用gotop
 * Author: JonyGuan
 * Date: 2022-05-12
 */
function gotop(){
    this.init();
}
gotop.prototype = {
    constructor: gotop,
    init: function(){
        this._initBackTop();
    },
    _initBackTop: function(){
        var $backTop = this.$backTop = $('<div class="cbbfixed">'+
            '<a class="gotop cbbtn">'+
            '<span class="up-icon"></span>'+
            '</a>'+
            '</div>');
        $('body').append($backTop);

        $backTop.click(function(){
            $("html, body").animate({
                scrollTop: 0
            }, 120);
        });

        var timmer = null;
        $(window).bind("scroll",function() {
            var d = $(document).scrollTop(),
                e = $(window).height();
            0 < d ? $backTop.css("bottom", "10px") : $backTop.css("bottom", "-90px");
            clearTimeout(timmer);
            timmer = setTimeout(function() {
                clearTimeout(timmer)
            },100);
        });
    }

}
var gotop = new gotop();
// 向上图片可以自行替换 base64
//------------------------base64-start---------------------//
var imgbase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAfCAYAAAB6Q+RGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAABmUlEQVRYw+3WWVIbMRCA4ThnCLux2bdcJc/cNG9QSRUXSFEQNrNmJZf4eLAGEiON5bHNuCr8j7am9fdMS90NeDO5fGg0Gh/f1m2Rw6vkfyX5ykSCVRxgpW6XlGALN7pcY7Fup17BJi78ywUW6nYrBKdwKs5XvJsEwUPlfMFUXYLTOJLH4YuLYgbHmYIFR5h+KcHZUGsx7rGLP4n/jzEzbsE5nCQEfmMnrHsfhGOcYG5cggs4S2z8C9s963eCeIxTzI9asInzxIY/sZV4bjskEOPMqO5RLKKT2OgHNvs8vxUSiXGO5rCCLVwmNviOjcw4myGhGB1VWyjauEoE/ob1AeNthMRiXKI1qOCS7pAQ4w6rFRNfDwnGuEI7N9Cyp2mml1tDjmG649xdIv41lvoFWAki1QLki5btc4PlKhnmf4p80bKSev7F+tTK4EWdL9qWPpxPta/81FW/HvJF+19z+JxYMPxFmy9a1jA+FS2vN5PRtax80Vjr7Ty+qFDERU2Ovvnni/49xNw+O6xYw75xjVH5ovPYw1rx2wPBNwhYf6JudAAAAABJRU5ErkJggg==';
//------------------------base64-end-----------------------//
$('head').append('<style>\n' +
    '.clearfix:after{content:\'.\';display:block;height:0;clear:both;visibility:hidden;}\n' +
    '.clearfix{*zoom:1;}\n' +
    '.clearfix .clear{_height:0px;}\n' +
    '.cbbfixed {position: fixed;right: 10px;transition: bottom ease .3s;bottom: -85px;z-index: 3;cursor:pointer;}\n' +
    '.cbbfixed .cbbtn {width: 40px;height: 40px;opacity:0.6;border-radius: 5px;display: block;background-color: #2c2d2e;}\n' +
    '.cbbfixed .gotop {transition: background-color ease .3s;margin-top: 1px;}\n' +
    '\t.cbbfixed .gotop .up-icon{float:left;margin:12px 0 0 9px;width:23px;height:18px;background: url('+imgbase64+') no-repeat;background-size: 100%;}\n' +
    '\t.cbbfixed .gotop:hover {background-color:#2c2d2e;}</style>');