![图片[1]-WordPress添加回到顶部悬挂猫咪[WP教程]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/WordPress%E6%B7%BB%E5%8A%A0%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%E6%82%AC%E6%8C%82%E7%8C%AB%E5%92%AA.jpg)
前言
回到顶部悬挂猫咪是今天我从网上看到觉得很不错，然后就弄到了本站，确实很棒。话不多说，下面分享教程！
使用教程
回到顶部悬挂猫咪只能电脑端显示，需要手机端显示，自己修改CSS代码。 - 本教程以本站使用的子比主题为例，大部分主题大同小异。
- 回到顶部悬挂猫咪采用js+css+Jquery,但大多数的WordPress主题都已经使用Jquery，所以无需担心Jquery问题（当然啦，如果主题没有Jquery，那么去百度找Jquery好用的CDN进行调用。）
1、首先，下载回到顶部悬挂猫咪的JS+CSS（
2、两种方式：
- 在
网站后台—>主题设置—>自定义代码—>自定义头部HTML代码 ，把下面的代码添加进去；
![图片[2]-WordPress添加回到顶部悬挂猫咪[WP教程]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%E6%82%AC%E6%8C%82%E7%8C%AB%E5%92%AA1.jpg)
- 如果没有
自定义头部HTML代码 那么的主题，请在主题目录下header.php末尾 添加下面的代码。
![图片[3]-WordPress添加回到顶部悬挂猫咪[WP教程]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%E6%82%AC%E6%8C%82%E7%8C%AB%E5%92%AA2.jpg)
- 代码：
<!--回到顶部-->
<link rel="stylesheet" type="text/css" href="/cdn/css/szgotop.css" />
<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -900px;"></div>
<script type="text/javascript" src="/cdn/js/szgotop.js"></script>注（非常重要） ：自己把得到CSS、JS文件放在喜欢的目录里面，或者在自己网站根目录下创建新的目录把文件放进去（嘿嘿嘿，实在实在是不会的自己花钱弄），然后在href=”文件路径”和src=”文件路径”填写自己的文件路径。悬挂猫咪是一张图片，还需要在CSS里面修改图片的路径（图片路径在CSS最后面，见下图）。
![图片[4]-WordPress添加回到顶部悬挂猫咪[WP教程]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/%E6%82%AC%E6%8C%82%E7%8C%AB%E5%92%AA.jpg)
3、前两步如果都完成了，那么在网站首页拉到底部就可以看到了悬挂猫咪，那么这时候就会出现“主题自带的回到顶部”和悬挂猫咪，那么需要我们到网站后台—>主题设置里面关闭主题自带的回到顶部，其他主题的主题设置不知道有没有关闭这一项。
- 子比主题只需在
网站后台—>主题设置—>全局&功能—>常用功能—>返回顶部按钮—>关闭电脑端的回到顶部。
![图片[5]-WordPress添加回到顶部悬挂猫咪[WP教程]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/%E5%85%B3%E9%97%AD%E7%94%B5%E8%84%91%E7%AB%AF%E7%9A%84%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8.jpg)
效果截图
![图片[6]-WordPress添加回到顶部悬挂猫咪[WP教程]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%E6%82%AC%E6%8C%82%E7%8C%AB%E5%92%AA.jpg)
感谢您的来访，获取更多精彩文章请收藏本站。
© 版权声明
THE END
![子比主题美化教程(备忘录)[更新时间:2022年11月12日]-星语的小木屋](https://www.wiiuii.cn/wp-content/uploads/2021/01/b106fb9775212236.jpg)
![WordPress添加VIP视频在线解析页面[WP教程]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/WordPress%E6%B7%BB%E5%8A%A0VIP%E8%A7%86%E9%A2%91%E5%9C%A8%E7%BA%BF%E8%A7%A3%E6%9E%90%E9%A1%B5%E9%9D%A2.jpg)
![子比主题添加热门标签页面[子比主题教程]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/%E5%AD%90%E6%AF%94%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E7%83%AD%E9%97%A8%E6%A0%87%E7%AD%BE%E9%A1%B5%E9%9D%A2.jpg)
![为WordPress网站添加一个[时光轴]页面[整站笔记]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/%E4%B8%BAWordPress%E7%BD%91%E7%AB%99%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%97%B6%E5%85%89%E8%BD%B4%E9%A1%B5%E9%9D%A2%E6%95%B4%E7%AB%99%E7%AC%94%E8%AE%B055.png)
![WordPress添加疫情实时动态页面[WP页面]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/WordPress%E7%96%AB%E6%83%85%E5%AE%9E%E6%97%B6%E5%8A%A8%E6%80%81.jpg)
![WordPress清新版说说页面[更新:2-7]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/WordPress%E6%B7%BB%E5%8A%A0%E6%B8%85%E6%96%B0%E7%89%88%E7%9A%84%E8%AF%B4%E8%AF%B4%E9%A1%B5%E9%9D%A2.jpg)
- 最新
- 最热
只看作者