| 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解 | 您所在的位置：网站首页 › js返回顶部按钮代码 › 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解 |
添加“返回顶部”小图标按钮的JS(JavaScript)代码详解
|
如何给自己的网站添加方便快捷的“返回顶部”小图标按钮呢？如下图： 
JS源代码： /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration 速度 * @param stime 时间间隔 (毫秒) **/ 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); } }HTML源代码： 
适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。 就是这么简单，就是这么任性！个性十足的你，赶快去试试吧！ 代码有不理解的地方可以通过留言与博主交流！ |
【本文地址】
公司简介
联系我们