子比主题美化:GoTop网站添加悬挂猫置顶效果

Jaysun

温馨提示:这篇文章已超过521天没有更新,请注意相关的内容是否还可用!

非常可爱的一款文章置顶小插件,会在滚动页面时自动爬下来,其主要功能就是帮助用户在浏览的网站界面中添加一个点击小猫之后回到网页顶部的效果,

在看到很多网站都有效果,觉得还是挺有趣的,浏览文章滚动页面就会出现悬挂猫滚动效果了。

效果图:

123.png

方法步骤:

更新:之前失效地址已替换下方,已更新为本站在线样式链接,

1,在网页的body中使用的地方添加如下demo:

html: 网页需要有内容可以滚动条才会触发效果

<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -900px;"></div>

2,引入第三方jq,js,CSS样式文件到跟上方div放一起,

下方地址是本站提供的样式文件,后期不用我可能会删除导致失效,所以有能力的还是自己下载保存。

<link rel="stylesheet" type="text/css" href="https://soujiz.com/demo/topCat/css/szgotop.css" />
<script src="https://qnCDN.wanshifu.com/wshifu-user/js/jquery-3.2.1.min.js"></script>
<script src="https://soujiz.com/demo/topCat/js/szgotop.js"></script>

WordPress博客使用:

找到wordpress主题目录中的footer.php模板文件,将上面两个代码文件添加到页脚footer.php底部即可使用。

源码下载:

如果上面方法使用没效果,可能第三方文件库已失效,下载源码文件有效,所以为了防止上方的CDN链接失效,还提供了完整的源码文件及详细的demo案例:

隐藏内容
评论可见
前往评论


您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 11 条评论,1435人围观)
网友昵称:changxiang
changxiang V 普通用户 LBrowser 9.0.0.10191 Windows 10 x64 10楼
01-26 来自内蒙古 回复
支持
网友昵称:torhumar
torhumar V 普通用户 Google Chrome 116.0.0.0 Windows 10 x64 9楼
2023-09-04 来自新疆 回复
多谢分享好好学习!
网友昵称:15939418109
15939418109 V 普通用户 Google Chrome 108.0.5359.125 Windows 10 x64 8楼
2023-06-28 来自上海 回复
多谢分享 学习!
网友昵称:hhdhhd
hhdhhd V 普通用户 Google Chrome 100.0.4896.58 ZTE 8030N 7楼
2023-03-30 来自云南 回复
看隐藏着
网友昵称:pengcheng
pengcheng V 普通用户 Google Chrome 110.0.0.0 Windows 10 x64 6楼
2023-03-12 来自江苏 回复
多谢分享,感谢
网友昵称:云海丶2018
云海丶2018 V 普通用户 Google Chrome 109.0.0.0 Windows 10 x64 地板
2023-01-29 来自河南 回复
多谢分享,感谢
网友昵称:云海丶2018
云海丶2018 V 普通用户 Google Chrome 109.0.0.0 Windows 10 x64 凉席
2023-01-21 来自河南 回复
多谢分享哈
网友昵称:云海丶2018
云海丶2018 V 普通用户 Google Chrome 108.0.0.0 Windows 10 x64 板凳
2023-01-03 来自河南 回复
多谢分享
网友昵称:xizefe
xizefe V 普通用户 Google Chrome 95.0.4638.69 Windows 10 x64 椅子
2022-12-04 来自广东 回复
多谢分享
网友昵称:hostsir
hostsir V 普通用户 Google Chrome 107.0.0.0 Windows 10 x64 沙发
2022-11-24 来自江苏 回复
看看怎么样

目录[+]

取消
微信二维码
微信二维码
支付宝二维码