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

上周花了点时间改了一下 Go Top 按钮的显示效果, 显示在页面右侧, 跟随浏览器窗口滚动, 在 IE6 浏览器中使用淡入淡出的跟随显示. 可能现在已经存在很多类似的插件和工具, 但我还是想分享一下, 并将脚本封装成类, 以方便其他人阅读和使用.

因为实现原理比较简单, 本文就不扯技术方面的话题了, 只会讲讲使用方法, 要研究的同学请自己默默地看代码去吧.

功能描述

在页面中注入回到顶部 (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 和添加执行脚本

在页面底部 </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, 那么可以添加代码如下:

ahttps://csswang.com/go-top{background:https://csswang.com/E6E6E6;width:50px;height:25px;text-align:center;text-decoration:none;line-height:25px;color:https://csswang.com/999;}
ahttps://csswang.com/go-top:hover{background:https://csswang.com/CCC;color:https://csswang.com/333;}

这里的样式请自由发挥, 但 width 请与脚本参数中的 nodeWidth 保持一致.

本文链接：» https://www.csswang.com/exp/2884

转载请注明本文来源出处。