时间：2013-10-22 编辑：简简单单 来源：一聚教程网
在 IE6 中, 因为不支持浏览器跟随功能, 所以通过跟随页面滚动来虚拟跟随效果, 在滚动页面的时候隐藏回到顶部按钮, 滚动停止时再显示按钮.
参数描述
pageWidth: 页面宽度 (正整数), 如图中 A 所示.
nodeId: 回到顶部按钮的 ID (字符串).
nodeWidth: 回到顶部按钮的宽度 (正整数), 如图中 B 所示.
distanceToBottom: 回到顶部按钮到页面底部的距离 (正整数), 如图中 C 所示.
hideRegionHeight: 不显示回到顶部按钮的顶部区域高度 (正整数), 如图中 D 所示.
text: 回到顶部按钮内显示的文本 (字符串).
1. 下载所需文件
jQuery,
jQuery ScrollTo (可选) 和
Go Top 功能脚本
2. 插入 JavaScript 和添加执行脚本
在页面底部
| 代码如下 | 复制代码 |
| 代码如下 | 复制代码 |
|
|
|
3. 修改网站样式文件
加入回到顶部按钮对应的样式, 假设回到顶部按钮 ID 设置为 go-top, 那么可以添加代码如下:
| 代码如下 | 复制代码 |
|
a#go-top{background:#E6E6E6;width:50px;height:25px;text-align:center;text-decoration:none;line-height:25px;color:#999;} |
|
这里的样式请自由发挥, 但 width 请与脚本参数中的 nodeWidth 保持一致.
下面是我自己写的一个完整的jquery返回顶部实例
CSS代码如下：
| 代码如下 | 复制代码 |
| .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; color: #fff; font-size: 12px; text-align: center; position: fixed; _position: absolute; right: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer; opacity: .6; filter: Alpha(opacity=60); } |
|
Javascript 代码如下：
| 代码如下 | 复制代码 |
| (function() { var $backToTopTxt = "返回顶部", $backToTopEle = $("").appendTo($("body")) .text($backToTopTxt).attr("title", $backToTopTxt).click(function() { $("html, body").animate({ scrollTop: 0 }, 120); }), $backToTopFun = function() { var st = $(document).scrollTop(), winh = $(window).height(); (st > 0)? $backToTopEle.show(): $backToTopEle.hide(); //IE6下的定位 if (!window.XMLHttpRequest) { $backToTopEle.css("top", st + winh - 166); } }; $(window).bind("scroll", $backToTopFun); $(function() { $backToTopFun(); }); })(); |
|
