jquery实现点击返回顶部
发布时间:2021-06-22作者:小灵龙点击:140
<style type="text/css"> #gotop{width:0.9rem;height:0.9rem;background:url(../images/gotop.png) no-repeat center top;background-size:0.9rem auto;position: fixed;bottom:20%;right:3%;cursor: pointer;z-index: 10;} #gotop span{ background: gray;font-size: 35px; } </style> <!--侧边栏按钮--> <div class="mreturn" id="gotop"> <a href="javascript:gotoTop()"> <span class="layui-icon layui-icon-up"></span> </a> </div>
function gotoTop(acceleration,stime) { acceleration = acceleration || 0.1; stime = stime || 10; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0; } if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0; } var x3 = window.scrollX || 0; var y3 = window.scrollY || 0; // 滚动条到页面顶部的水平距离 var x = Math.max(x1, Math.max(x2, x3)); // 滚动条到页面顶部的垂直距离 var y = Math.max(y1, Math.max(y2, y3)); // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小 var speeding = 1 + acceleration; window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding)); // 如果距离不为零, 继续调用函数 if(x > 0 || y > 0) { var run = "gotoTop(" + acceleration + ", " + stime + ")"; window.setTimeout(run, stime); } }