给网站添加回到顶部按钮

2012年3月28日 | 分类: | 标签: ,

一直就想给博客添加个类似新浪微博右边的回到顶部按钮,奈何自己不懂这些网站代码设计的东西。直到前天mg12的博客发了篇新博文(jQuery 跟随浏览器窗口的回到顶部按钮)介绍了添加方法和脚本之后才动手搞了个,具体演示可以看我的博客右下方。

参数描述:

  • pageWidth: 页面宽度(正整数),如图中 A 所示。
  • nodeId: 回到顶部按钮的 ID (字符串)。
  • nodeWidth: 回到顶部按钮的宽度 (正整数), 如图中 B 所示。
  • distanceToBottom: 回到顶部按钮到页面底部的距离 (正整数),如图中 C 所示。
  • hideRegionHeight: 不显示回到顶部按钮的顶部区域高度 (正整数),如图中 D 所示。
  • text: 回到顶部按钮内显示的文本 (字符串)。

回到顶部按钮

1.下载所需文件

下载一个Go Top功能脚本,点击下载(Go Top+滚动效果) ,或者参考我博客的js文件 //gotop 和 //滚动效果 部分,可直接复制使用。

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

将下载的JS文件放置到自己的网站上,在页面底部之前加入代码,例子如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!-- 可添加google的jQuery库 -->
<script src="go-top.js"></script> <!--Go Top功能脚本-->
<script>
/* < ![CDATA[ */
(new GoTop()).init({
	pageWidth		:980,
	nodeId			:'go-top',
	nodeWidth		:50,
	distanceToBottom	:125,
	hideRegionHeight	:130,
	text			:'Top'
});
/* ]]> */
</script>

3.修改网站样式文件

加入回到顶部按钮对应的样式, 假设回到顶部按钮 ID 设置为 go-top, 那么可以添加代码如下:

1
2
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;}

可以自行修改css样式,但 width 请与脚本参数中的 nodeWidth 保持一致。

其实就很简单的添加一段代码和上传一个js文件,大家按着教程来做都可以做好的,适合任何网站添加哦。

声明: 本文遵循 BY-NC-SA 3.0 协议. 转载请注明转自: 给网站添加回到顶部按钮
支持本博发展,请勿过滤广告。
  1. 2012年3月31日11:09

    好吧,我是来测试的

  2. 2012年4月6日00:56

    研究了一下没成功.放弃了..

  3. 2012年4月6日08:25

    @zvv
    你呀你,这个真的很简单的,就添加一段代码而已啦。

  4. 2012年4月6日15:52

    @臻
    ~~~

  5. youpi
    2012年4月8日23:18

    兄弟,看你的说明。搞了半天,没搞成功啊。可以把JS文件,都发给我邮箱吗?我自己去装了试试看。

  6. youpi
    2012年4月8日23:19

    我的邮箱填在留言的框里了,你应该看得到的。拜托啦,发一份给我。

  7. 2012年4月9日09:25

    @youpi
    已经发给你了,行了回来告诉下。

  8. youpi
    2012年4月9日12:24

    @臻
    谢谢你先。
    坏消息:
    我把GO-TO 的JS文件送到服务器了,并且引用了。还是没有显示。
    这个就很奇怪了...具体请看邮箱。

  9. 2012年4月9日12:25

    @youpi
    添加了CSS没有啊?你给你站我看看~

  10. youpi
    2012年4月9日21:26

    @臻
    试验成功了,先加CSS代码。再上传JS文件,添加JS代码。就可以了~
    只是和我的主题CSS冲突了,不能共存。所以只能下掉了,希望能所称图片的形式。
    不要加CSS代码,以免和主题的CSS冲突。
    感谢博主的热心相助!以后会关注你的。

  11. 2012年4月9日21:28

    @youpi
    CSS冲突你就改个名字啊,应该不会冲突的,要图片也只能CSS改。或者去mg12那里问问吧~毕竟是他搞出来的。

  12. youpi
    2012年4月10日16:42
  13. 2012年8月28日14:29

    感觉有点麻烦有点乱哈。我的思路是:Top按钮,使用css定位,position:fixed ,使用javascript检测页面滑动情况,到达一定高度之后,给它fadeIn,点击之后,直接scroll顶部就OK了。。不至于要这么多脚本吧。。

  14. 2012年12月1日22:41

    @youpi
    这个比较适合我,呵呵,导入js还要添加代码这个有点麻烦。

  15. 2013年1月17日01:31

    很不错哦。很有作用。。

1 trackbacks

XHTML: 您可以使用这些标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。请务必注意user必须和评论者名相匹配(大小写一致)。