添加“返回顶部”小图标按钮的JS(JavaScript)代码详解
2016-11-08 20:15
531 查看
如何给自己的网站添加方便快捷的“返回顶部”小图标按钮呢?如下图:
JS源代码:
HTML源代码:
适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。
就是这么简单,就是这么任性!个性十足的你,赶快去试试吧!
代码有不理解的地方可以通过留言与博主交流!
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源代码:
<div onClick="gotoTop();return false;" style="position:fixed;right:10px;bottom:15%;"><img src="http://images.cnblogs.com/cnblogs_com/wangduo/882494/o_top.png" width=36px;height=36px></div>
适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。
就是这么简单,就是这么任性!个性十足的你,赶快去试试吧!
代码有不理解的地方可以通过留言与博主交流!
相关文章推荐
- js,javascript,jquery网页返回顶部代码
- .NET中用弹出窗口添加或修改一个页面,当添加或修改相关内容后按下提交按钮自动刷新页面的JS代码
- 简单的返回顶部的js代码
- 三款简单的JS返回页面顶部代码
- javascript返回顶部几种代码总结
- 一个简单的 弹性返回顶部JS代码
- 迅速返回页面顶部浮动按钮代码...
- 返回顶部浮动图标代码
- 不但要返回顶部,还要返回底部,小改变,实用,?scroll?的js代码,支持IE,FF,chrome[摘自布布分享,tech.bubufx.com]
- ...后台代码中如何调用 javascript 函数的问题! - ASP.NET专题(按钮事件中调用JS文件中函数)
- js返回顶部的代码
- 返回顶部浮动图标代码
- 添加按钮图标并且当点击或者悬浮上面出现不同效果的代码
- JS做”返回顶部”按钮功能并实现滑动效果
- 网页中插入“返回”按钮的JavaScript代码
- Js、Asp返回按钮、返回连接代码
- learning ext js 中文版之在对话框中添加图标和按钮事件
- 返回顶部按钮js挂件
- JS返回上一页实例代码通过图片和按钮分别实现
- discuz论坛添加、更换返回顶部图标