给网站添加回到顶部按钮

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

参数描述:

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

回到顶部按钮

1.下载所需文件

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

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

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

<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, 那么可以添加代码如下:

a#go-top{background:#F9F9F9;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 协议. 转载请注明转自: 给网站添加回到顶部按钮

已有 16 条评论

  1. 好吧,我是来测试的

  2. zvv zvv

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

  3. 臻

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

  4. zvv zvv

    @臻

  5. youpi youpi

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

  6. youpi youpi

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

  7. 臻

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

  8. youpi youpi

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

  9. 臻

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

  10. youpi youpi

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

  11. 臻

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

  12. youpi youpi

    @臻
    用这个插件,全部浏览器都正常。
    http://www.daobydesign.com/blog/development-news/new-wp-plugin-totop-link/

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

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

  15. 很不错哦。很有作用。。

添加新评论