jQuery 跟随浏览器窗口的回到顶部按钮

功能描述

在页面中注入回到顶部 (Go Top) 按钮, 并为该按钮绑定跟随浏览器窗口和回到页面顶部的事件. 需要 jQuery 支持, 如果同时引入 jQuery 的 ScrollTo 插件将有滚动回到页面顶部的效果, 否则只是直接定位至顶部.

在 IE6 中, 因为不支持浏览器跟随功能, 所以通过跟随页面滚动来虚拟跟随效果, 在滚动页面的时候隐藏回到顶部按钮, 滚动停止时再显示按钮.

参数描述

pageWidth: 页面宽度 (正整数), 如图中 A 所示.

nodeId: 回到顶部按钮的 ID (字符串).

nodeWidth: 回到顶部按钮的宽度 (正整数), 如图中 B 所示.

distanceToBottom: 回到顶部按钮到页面底部的距离 (正整数), 如图中 C 所示.

distanceToPage: 回到顶部按钮到页面右边的距离 (正整数), 默认 20.

hideRegionHeight: 不显示回到顶部按钮的顶部区域高度 (正整数), 如图中 D 所示.

text: 回到顶部按钮内显示的文本 (字符串).

使用步骤

1. 下载所需文件

jQuery 和 Go Top 功能脚本 (备用下载地址), 放置到可以外链的网盘或者网站上.

2. 插入 JavaScript 和添加执行脚本

在页面底部

之前加入代码例子如下:

<<SPAN style="COLOR: #000000; FONT-WEIGHT: bold">script src="jquery.js"><<SPAN style="COLOR: #66cc66">/script> <<SPAN style="COLOR: #000000; FONT-WEIGHT: bold">script src="go-top.js"><<SPAN style="COLOR: #66cc66">/script> <<SPAN style="COLOR: #000000; FONT-WEIGHT: bold">script> <<SPAN style="COLOR: #66cc66">/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 保持一致.

打赏

感谢支持与鼓励～