当前位置:首页 > 瞎折腾 > 正文内容

一个简洁大气的JS返顶代码,适用于所有程序需要的自取

Mr2年前 (2019-01-12)瞎折腾661

闲来无事,由于原本主题自带的返回顶部看起来不是很高大上,于是就折腾了一个比较简洁的返顶效果,见本站返顶

返顶图标.jpg

修改三部曲

1、头部文件<head></head>标签之间插入如下代码,文件名一般header.php

<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>

2、底部文件</body>标签之前添加如下代码,文件名footer.php

<div class="headeline"></div> <script type="text/javascript" src="js/scrolltopcontrol.js"></script></p>

3、将底部下载文件下载,上传到网站根目录即可,图片和返顶图标位置修改文件:scrolltopcontrol名的JS文件内如下代码 第8、9行

controlHTML:'<img src="images/topback.png" style="width:50px; height:48px; border:0;" />', //返回顶部按钮 controlattrs:{offsetx:25,offsety:50},//返回按钮固定位置

修改完成后去后台更新一下网站缓存,前台刷新看看效果如何!

top大小:100KB  推荐微信打开
已经过安全软件检测无毒,请您放心下载。

版权声明:若无特殊注明,本站文章均由 微客生活 编辑发布

本文链接:http://www.weklife.cn/91.html

标签: 返顶代码
分享给朋友:

相关文章

在自己网站添加通用的三种熊掌号bar展现改造方式

在自己网站添加通用的三种熊掌号bar展现改造方式

目前大部分使用移动搜索的朋友会发现,很多网站都在不同的网页位置加入了熊掌号的关注的按钮,那么如何实现在网页插入熊掌号关注按钮本文给出常用的三种熊掌号banner展现方式,  但是前提是要有熊...

给你的zblogPHP添加一个面包屑导航

给你的zblogPHP添加一个面包屑导航

由于ZBLOG一些主题是比较简洁的所以也没有面包屑导航,但是对于用户体验和seo角度来说,面包屑导航还是很有必要的,那么本文就给出比较简单的代码如下当前位置:&nbsp;<a ...

利用DIV+CSS让某些文字或图片只在电脑PC端显示移动端不显示

利用DIV+CSS让某些文字或图片只在电脑PC端显示移动端不显示

现在的网页都讲究一个自适应,所以有部分文字或图片不想再移动端页面显示,当然一般的博客主题或网站模板都自带了这个功能,但是少部分网页没有区分,让PC端的问题一个不漏都显示在了移动端,尤其是备案信息,由于...

将zblog文章作者和评论显示用户名修改成别名

将zblog文章作者和评论显示用户名修改成别名

也许很多博友也会遇到如此的尴尬情况就是当自己发表博文或者评论时别人都是显示自己的别名,为什么自己却显示用户名也就是登陆ID,自己搞了半天想了个吊炸天的别名,最后显示用户名ID很多zblog主题调用的都...

百度统计未检测到代码,换JS代码搞定!

百度统计未检测到代码,换JS代码搞定!

最近发现百度统计代码更换位置了,放在网站footer脚部文件中已经没用了,需要将代码防止header头部文件,当然我这里是以自己所使用的zblog举例说明;也许很多人没有遇到过类似问题,但是总会有遇到...

云虚拟主机巧用htaccess文件实现二级域名绑定二级目录

云虚拟主机巧用htaccess文件实现二级域名绑定二级目录

本文来说说使用阿里云虚拟主机的朋友如何实现用二级域名来绑定目录的访问权,这玩意儿着实折腾了我10个小时才搞定的,基本方法都是网上找到的但不是很完美,例如出现的问题有:访问出现500, 二级域名访问一个...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。