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

时间 2019-11-09

原文原文链接

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

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

功能描述

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

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

参数描述

pageWidth: 页面宽度 (正整数), 如图中 A 所示.node
nodeId: 回到顶部按钮的 ID (字符串).jquery
nodeWidth: 回到顶部按钮的宽度 (正整数), 如图中 B 所示.浏览器
distanceToBottom: 回到顶部按钮到页面底部的距离 (正整数), 如图中 C 所示.ide
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,	
 	distanceToPage	        :20,   //以前被做者忘了
 	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 保持一致.

后话

月初我换了台电脑, 分辨率提升了不少, 博客两边多出来不少空间, 而当时为了省事作的 Go Top 按钮一直贴近浏览器窗体的右边界, 至关难看. 因此上周花了点时间来重写了一下相关代码, 当初公司用的相关组件也是我写的, 再整个 jQuery 的也不费时. 然而我很是喜欢 Alibaba.com 搜索页面 Go Top 按钮的设计, 图片盗了过来.

这个脚本支持全部网站使用, 为此, 我没有将它作成 WordPress 插件. 若是使用遇到问题, 请在此留言. 几年前我写过一个 JavaScript 实现变速滚动回到页面顶部的文章, 有兴趣的朋友也能够看看.

使用图片修改文中提到的CSS便可.

a#go-top{background:url(图片连接) no-repeat;}

a#go-top:hover{background:url(鼠标悬浮图片连接) no-repeat;}