通用 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>');