网络瘫痪上不了网？电脑出故障？找破解软件？加入创想工作室QQ群，向大神求助，一步解决问题！QQ群号码：18345199。[点此获取更多QQ群]
功能描述
在页面中注入回到顶部 (Go Top) 按钮, 并为该按钮绑定跟随浏览器窗口和回到页面顶部的事件. 需要 jQuery 支持, 如果同时引入 jQuery 的 ScrollTo 插件将有滚动回到页面顶部的效果, 否则只是直接定位至顶部。
在 IE6 中, 因为不支持浏览器跟随功能, 所以通过跟随页面滚动来虚拟跟随效果, 在滚动页面的时候隐藏回到顶部按钮, 滚动停止时再显示按钮。
参数描述
pageWidth: 页面宽度 (正整数), 如图中 A 所示.nodeId: 回到顶部按钮的 ID (字符串).nodeWidth: 回到顶部按钮的宽度 (正整数), 如图中 B 所示.distanceToBottom: 回到顶部按钮到页面底部的距离 (正整数), 如图中 C 所示.distanceToPage: 回到顶部按钮到页面右边的距离 (正整数), 默认 20.hideRegionHeight: 不显示回到顶部按钮的顶部区域高度 (正整数), 如图中 D 所示.text: 回到顶部按钮内显示的文本 (字符串).
使用步骤
1. 下载所需文件
2. 插入 JavaScript 和添加执行脚本
在页面底部 </body> 之前加入代码例子如下:
<script src="jquery.js"></script> <!-- 如果已在网站的其他地方引入 jQuery, 请不要在次引入 --><script src="go-top.js"></script><script>/* <![CDATA[ */(new GoTop()).init({pageWidth :980,nodeId :'go-top',nodeWidth :50,distanceToBottom :125,hideRegionHeight :130,text :'Top'});/* ]]> */</script>
3. 修改网站样式文件
加入回到顶部按钮对应的样式, 假设回到顶部按钮 ID 设置为 go-top, 那么可以添加代码如下:
a#go-top{background:#E6E6E6;width:50px;height:25px;text-align:center;text-decoration:none;line-height:25px;color:#999;}a#go-top:hover{background:#CCC;color:#333;}
这里的样式请自由发挥, 但 width 请与脚本参数中的 nodeWidth 保持一致。
