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文件，大家按着教程来做都可以做好的，适合任何网站添加哦。

html设置回到顶部按钮,给网站添加回到顶部按钮相关推荐

2022最新可用网页百度分享按钮安装教程【网站添加百度分享按钮代码】
简介: 2022最新可用百度分享是一个提供网页地址收藏.分享及发送的WEB2.0按钮工具,借助百度分享按钮,网站的浏览者可以方便的分享内容到人人网.开心网.QQ空间.新浪微博等一系列SNS站点. 网站 ...
BackToTop.js 为你的网站添加“回到顶部”按钮
图片来源:Inspiring Wallpapers 就像上图中的超人一样,你的读者也想要一飞冲天的感觉. 没错,你的网站需要一个 "回到顶部" 的按钮. 每当你的文章写得很长,或者 ...
教你网站怎么添加返回顶部代码?
网站添加返回顶部有好几种,下面我简单介绍下: 1 使用文字添加方法最简单的是:最简单的"返回顶部"代码就是"<a href="javascript:scr ...
HTML点击元素页面回到顶部,博客园页面添加返回顶部 TOP 按钮
博客园页面添加返回顶部 TOP 按钮 TOP 按钮进入网页管理 -> 设置在 "页面定制 CSS 代码" 中添加如下 CSS 样式, 当然你可以改为自己喜欢的样式此处可 ...
IIS 之添加绑定域名或设置输入IP直接访问网站
1.打开IIS,右键站点 → 编辑绑定,弹出"网站绑定"窗口,如下图: 2.点击"添加",弹出"添加网站绑定"窗口,如下图: 注意:若想输入 ...
IOS设置导航栏返回按钮，并添加事件返回主页面
IOS设置导航栏返回按钮,并添加事件返回主页面前提是已经push了一个viewController了.才能使用. XXXTableViewController 里面书写 - (void)viewDi ...
怎么给WordPress网站添加固定的百度分享按钮？
怎么给WordPress网站添加固定的百度分享按钮?WordPress固定在页面左侧的百度分享按钮,可方便读者分享自己喜欢的文章,本文教你把这个固定的分享按钮添加到其它主题中. 1.第一步,在你所用主 ...
给微软免费的文本转语音网站添加下载按钮
微软官网文本转语音: https://azure.microsoft.com/zh-cn/services/cognitive-services/text-to-speech/#features 添加 ...
网站添加“分享按钮”
站长基本上都会给自己网站添加"分享按钮" 1.http://www.bshare.cn/ 和 2.http://www.jiathis.com/ 3.百度分享:(推荐) http: ...
阿里云服务器给WordPress网站添加SSL证书，并且设置http自动跳转https
给WordPress网站添加SSL证书,并且设置http自动跳转https 文章目录下载证书到本地上传证书到服务器修改nginx配置文件设置http跳转https 重启Nginx服务联系方式 ...

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

html设置回到顶部按钮,给网站添加回到顶部按钮相关推荐

最新文章

热门文章