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

发表于2013-11-12 14:08:54来源于创想网页设计工作室

次点击[大] [中] [小] [打印] [关闭窗口] [评论]

网络瘫痪上不了网？电脑出故障？找破解软件？加入创想工作室QQ群，向大神求助，一步解决问题！QQ群号码：326338868。[点此获取更多QQ群]

功能描述

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

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

参数描述

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

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

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

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

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

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

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

使用步骤

1. 下载所需文件

https://www.22ba.com/uploadfile/2013/1112/20131112021234856.rar

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

在页面底部 </body> 之前加入代码例子如下:

<script src="jquery.js"></script> 

<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 保持一致。

相关热词搜索：jQuery 回到顶部

上一篇：网站上实现侧边栏跟随滚动效果

下一篇：js实现文字定时滚动特效

延伸阅读：

jquery实现淘宝按颜色选择产品特效 jquery实现腾讯新闻幻灯片特效调用灵活的通用Jquery幻灯片焦点图插件鼠标放在图片上显示大图 jQuery实现单行文字循环滚动分享个达到一定高度就出现返回顶部按钮的代码 jquery实现文章内图片可点击新窗口打开 Jquery实现图片等比例缩放和新窗口打开 jQuery实现页面滚动时层智能浮动定位插件比较不错的顶部固定、二级栏目之间平滑切换的导航菜单