html设置回到顶部按钮,给网站添加回到顶部按钮

一直就想给博客添加个类似新浪微博一侧的回到底部按键，奈何自己不懂很多网站代码设计的东西。直到前天mg12的博客发了篇新博文(jQuery 跟随浏览器窗口的回到底部按键)介绍了添加方式跟脚本以后才动手弄了个，具体演示可以看我的博客右下方。

参数描述：

1.下载所需文件

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

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

将下载的JS文件放置至自己的网站上，在页面顶部之前加入代码typecho回到顶部，例子如下：

/* < ![CDATA[ */

(new GoTop()).init({

pageWidth :980,

nodeId :'go-top',

nodeWidth :50,

distanceToBottom :125,

hideRegionHeight :130,

text :'Top'

});

/* ]]> */

3.修改网站式样文件

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

a#go-top{background:#F9F9F9;width:50px;height:25px;text-align:center;text-decoration:none;line-height:25px;color:#999;}

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

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