一直就想给博客添加个类似新浪微博右边的回到顶部按钮，奈何自己不懂这些网站代码设计的东西。直到前天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文件，大家按着教程来做都可以做好的，适合任何网站添加哦。