今天给大家分享下路途吧返回顶部那块的制作教程，其实也不难，主要是用到html、css和一些jq代码。
效果图如下图所示：
废话不多说，我们开始教程：
首先我们把下面的html代码添加到主题footer.php文件的</body>上面：
<div class=\"gotop\">
<a id=\"top\"><i class=\"iconfont icon-arrow-up\"><span%20class="token tag"><span%20class="token punctuation"></i<span%20class="token punctuation">><span%20class="token tag"><span%20class="token punctuation"></a<span%20class="token punctuation">>
<a href=\"<span%20class="token php language-php"><span%20class="token delimiter important"><?php <span%20class="token keyword keyword-echo">echo <span%20class="token variable">$gotop<span%20class="token punctuation">[\'qq_url\'<span%20class="token punctuation">]<span%20class="token delimiter important">?>\" rel=\"external nofollow\" rel=\'nofollow\' class=\"uk-display-block b-b\"><i class=\"iconfont icon-qq\"><span%20class="token tag"><span%20class="token punctuation"></i<span%20class="token punctuation">><span%20class="token tag"><span%20class="token punctuation"></a<span%20class="token punctuation">>
<a class=\"wechat\"><i class=\"iconfont icon-wechat\"><span%20class="token tag"><span%20class="token punctuation"></i<span%20class="token punctuation">><span%20class="token tag"><span%20class="token punctuation"></a<span%20class="token punctuation">>
<a href=\"https://www.baidu.com/baidu?word=wptoo%E6%95%99%E7%A8%8B%E7%BD%91\" rel=\"external nofollow\" rel=\'nofollow\'><i class=\"iconfont icon-resonserate-fill\"><span%20class="token tag"><span%20class="token punctuation"></i<span%20class="token punctuation">><span%20class="token tag"><span%20class="token punctuation"></a<span%20class="token punctuation">>
<a id=\"footer\"><i class=\"iconfont icon-arrow-down\"><span%20class="token tag"><span%20class="token punctuation"></i<span%20class="token punctuation">><span%20class="token tag"><span%20class="token punctuation"></a<span%20class="token punctuation">>
<span%20class="token tag"><span%20class="token punctuation"></div<span%20class="token punctuation">>
<div class=\"gotop-pop\">
<div class=\"gotop-pop-main\">
<div class=\"gotop-pop-box uk-overflow-hidden\">
<span%20class="token tag"><span%20class="token punctuation"><h3<span%20class="token punctuation">>微信<span%20class="token tag"><span%20class="token punctuation"></h3<span%20class="token punctuation">>
<i class=\"iconfont icon-icon-test25 gotop-pop-box-close\"><span%20class="token tag"><span%20class="token punctuation"></i<span%20class="token punctuation">>
<img src=\"https://www.zhankr.net/wp-content/uploads/2020/02/2020020408254925.jpg\" />
<span%20class="token tag"><span%20class="token punctuation"></div<span%20class="token punctuation">>
<span%20class="token tag"><span%20class="token punctuation"></div<span%20class="token punctuation">>
<span%20class="token tag"><span%20class="token punctuation"></div<span%20class="token punctuation">>
可以看到在右侧按钮上面是有Icon图标的，所以我们还需要加载一个Icon图标，把下面的一行代码添加到header.php的</head>标签上面，加载Icon样式。
<span%20class="token operator"><link rel<span%20class="token operator">=\"stylesheet\" href<span%20class="token operator">=\"https<span%20class="token punctuation">:<span%20class="token comment">//at.alicdn.com/t/font_1557485_rig7wtgjqd.css\" rel=\"external nofollow\" />
Icon图标
如果你的博客有Icon图标样式，可以不用添加上面的代码，用自己的图标
然后我们添加js代码，将下面代码添加到footer.php文件的</body>上面：
<span%20class="token operator"><script<span%20class="token operator">>
$<span%20class="token punctuation">(window<span%20class="token punctuation">)<span%20class="token punctuation">.<span%20class="token function">scroll<span%20class="token punctuation">(<span%20class="token keyword keyword-function">function<span%20class="token punctuation">(<span%20class="token punctuation">) <span%20class="token punctuation">{
<span%20class="token keyword keyword-var">var scroll_top <span%20class="token operator">= $<span%20class="token punctuation">(window<span%20class="token punctuation">)<span%20class="token punctuation">.<span%20class="token function">scrollTop<span%20class="token punctuation">(<span%20class="token punctuation">)<span%20class="token punctuation">;
<span%20class="token keyword keyword-if">if<span%20class="token punctuation">(scroll_top <span%20class="token operator">>= <span%20class="token number">200<span%20class="token punctuation">) <span%20class="token punctuation">{
$<span%20class="token punctuation">(\"<span%20class="token punctuation">.gotop\"<span%20class="token punctuation">)<span%20class="token punctuation">.<span%20class="token function">fadeIn<span%20class="token punctuation">(<span%20class="token punctuation">)<span%20class="token punctuation">;
<span%20class="token punctuation">} <span%20class="token keyword keyword-else">else <span%20class="token punctuation">{
$<span%20class="token punctuation">(\"<span%20class="token punctuation">.gotop\"<span%20class="token punctuation">)<span%20class="token punctuation">.<span%20class="token function">fadeOut<span%20class="token punctuation">(<span%20class="token punctuation">)<span%20class="token punctuation">;
<span%20class="token punctuation">}
<span%20class="token punctuation">}<span%20class="token punctuation">)<span%20class="token punctuation">;
$<span%20class="token punctuation">(\"<span%20class="token shell-comment comment">#top\").click(function() {
$<span%20class="token punctuation">(\"html<span%20class="token punctuation">,body\"<span%20class="token punctuation">)<span%20class="token punctuation">.<span%20class="token function">finish<span%20class="token punctuation">(<span%20class="token punctuation">)<span%20class="token punctuation">.<span%20class="token function">animate<span%20class="token punctuation">(<span%20class="token punctuation">{
\"scrollTop\"<span%20class="token punctuation">: $<span%20class="token punctuation">(\"<span%20class="token punctuation">.top\"<span%20class="token punctuation">)<span%20class="token punctuation">.<span%20class="token function">offset<span%20class="token punctuation">(<span%20class="token punctuation">)<span%20class="token punctuation">.top
<span%20class="token punctuation">}<span%20class="token punctuation">, <span%20class="token number">500<span%20class="token punctuation">)<span%20class="token punctuation">;
<span%20class="token punctuation">}<span%20class="token punctuation">)<span%20class="token punctuation">;
$<span%20class="token punctuation">(\"<span%20class="token shell-comment comment">#footer\").click(function() {
$<span%20class="token punctuation">(\"html<span%20class="token punctuation">,body\"<span%20class="token punctuation">)<span%20class="token punctuation">.<span%20class="token function">finish<span%20class="token punctuation">(<span%20class="token punctuation">)<span%20class="token punctuation">.<span%20class="token function">animate<span%20class="token punctuation">(<span%20class="token punctuation">{
\"scrollTop\"<span%20class="token punctuation">: $<span%20class="token punctuation">(\"<span%20class="token punctuation">.bottom\"<span%20class="token punctuation">)<span%20class="token punctuation">.<span%20class="token function">offset<span%20class="token punctuation">(<span%20class="token punctuation">)<span%20class="token punctuation">.top
<span%20class="token punctuation">}<span%20class="token punctuation">, <span%20class="token number">500<span%20class="token punctuation">)<span%20class="token punctuation">;
<span%20class="token punctuation">}<span%20class="token punctuation">)<span%20class="token punctuation">;
$<span%20class="token punctuation">(\'<span%20class="token punctuation">.wechat\'<span%20class="token punctuation">)<span%20class="token punctuation">.<span%20class="token function">click<span%20class="token punctuation">(<span%20class="token keyword keyword-function">function<span%20class="token punctuation">(<span%20class="token punctuation">) <span%20class="token punctuation">{
$<span%20class="token punctuation">(\'<span%20class="token punctuation">.gotop<span%20class="token operator">-pop\'<span%20class="token punctuation">)<span%20class="token punctuation">.<span%20class="token function">toggle<span%20class="token punctuation">(<span%20class="token punctuation">)<span%20class="token punctuation">;
<span%20class="token punctuation">}<span%20class="token punctuation">)<span%20class="token punctuation">;
$<span%20class="token punctuation">(\'<span%20class="token punctuation">.gotop<span%20class="token operator">-pop<span%20class="token operator">-box<span%20class="token operator">-close\'<span%20class="token punctuation">)<span%20class="token punctuation">.<span%20class="token function">click<span%20class="token punctuation">(<span%20class="token keyword keyword-function">function<span%20class="token punctuation">(<span%20class="token punctuation">) <span%20class="token punctuation">{
$<span%20class="token punctuation">(\'<span%20class="token punctuation">.gotop<span%20class="token operator">-pop\'<span%20class="token punctuation">)<span%20class="token punctuation">.<span%20class="token function">hide<span%20class="token punctuation">(<span%20class="token punctuation">)
<span%20class="token punctuation">}<span%20class="token punctuation">)<span%20class="token punctuation">;
<span%20class="token operator"><<span%20class="token operator">/script<span%20class="token operator">>
以上代码依赖jquery，请确保你的博客已经加载jquery文件。
最后就是css样式了， 将下面代码添加到header.php文件的</head>上面，也可以添加到主题的样式文件内，一般是style.css这个文件。（为了方便二次修改，css样式代码没有压缩，代码比较长，可以直接点击复制）
<span%20class="token comment">/*
* ------------------------------------------------------------------------------
* 返回顶部样式
* ------------------------------------------------------------------------------
*/
<span%20class="token punctuation">.gotop <span%20class="token punctuation">{
position<span%20class="token punctuation">: fixed<span%20class="token punctuation">;
bottom<span%20class="token punctuation">: <span%20class="token number">0<span%20class="token punctuation">;
right<span%20class="token punctuation">: <span%20class="token number">0<span%20class="token punctuation">;
margin<span%20class="token punctuation">: <span%20class="token number">30px<span%20class="token punctuation">;
display<span%20class="token punctuation">: none<span%20class="token punctuation">;
overflow<span%20class="token punctuation">: hidden<span%20class="token punctuation">;
border<span%20class="token operator">-radius<span%20class="token punctuation">: <span%20class="token number">4px<span%20class="token punctuation">;
border<span%20class="token punctuation">: <span%20class="token number">1px solid <span%20class="token shell-comment comment">#eee;
<span%20class="token punctuation">}
<span%20class="token punctuation">.gotop a <span%20class="token punctuation">{
display<span%20class="token punctuation">: block<span%20class="token punctuation">;
padding<span%20class="token punctuation">: <span%20class="token number">10px <span%20class="token number">13px<span%20class="token punctuation">;
background<span%20class="token operator">-color<span%20class="token punctuation">: <span%20class="token shell-comment comment">#fff;
transition<span%20class="token punctuation">: all <span%20class="token number">.3s ease<span%20class="token punctuation">;
color<span%20class="token punctuation">: <span%20class="token shell-comment comment">#888;
background<span%20class="token punctuation">: <span%20class="token shell-comment comment">#fff;
border<span%20class="token operator">-bottom<span%20class="token punctuation">: <span%20class="token number">1px solid <span%20class="token shell-comment comment">#eee;
text<span%20class="token operator">-decoration<span%20class="token punctuation">: none<span%20class="token punctuation">;
cursor<span%20class="token punctuation">: pointer<span%20class="token punctuation">;
<span%20class="token punctuation">}
<span%20class="token punctuation">.gotop a<span%20class="token punctuation">:hover <span%20class="token punctuation">{
color<span%20class="token punctuation">: <span%20class="token shell-comment comment">#fff;
background<span%20class="token punctuation">: <span%20class="token shell-comment comment">#2c63ff;
box<span%20class="token operator">-shadow<span%20class="token punctuation">: <span%20class="token operator">-<span%20class="token number">3px <span%20class="token number">2px <span%20class="token number">10px <span%20class="token operator">-<span%20class="token number">2px <span%20class="token shell-comment comment">#2c63ff;
transform<span%20class="token punctuation">: <span%20class="token function">translateY<span%20class="token punctuation">(<span%20class="token operator">-<span%20class="token number">3px<span%20class="token punctuation">)<span%20class="token punctuation">;
border<span%20class="token punctuation">: <span%20class="token number">0
<span%20class="token punctuation">}
<span%20class="token punctuation">.gotop a<span%20class="token punctuation">:last<span%20class="token operator">-child <span%20class="token punctuation">{
border<span%20class="token punctuation">: <span%20class="token number">0
<span%20class="token punctuation">}
<span%20class="token punctuation">.gotop i <span%20class="token punctuation">{
font<span%20class="token operator">-size<span%20class="token punctuation">: <span%20class="token number">18px
<span%20class="token punctuation">}
<span%20class="token punctuation">.gotop<span%20class="token operator">-pop <span%20class="token punctuation">{
position<span%20class="token punctuation">: fixed<span%20class="token punctuation">;
width<span%20class="token punctuation">: <span%20class="token number">100<span%20class="token operator">%<span%20class="token punctuation">;
height<span%20class="token punctuation">: <span%20class="token number">100<span%20class="token operator">%<span%20class="token punctuation">;
background<span%20class="token punctuation">: <span%20class="token shell-comment comment">#00000030;
display<span%20class="token punctuation">: none<span%20class="token punctuation">;
top<span%20class="token punctuation">: <span%20class="token number">0<span%20class="token punctuation">;
transition<span%20class="token punctuation">: all <span%20class="token number">.3s<span%20class="token punctuation">;
<span%20class="token punctuation">}
<span%20class="token punctuation">.gotop<span%20class="token operator">-pop<span%20class="token operator">-main <span%20class="token punctuation">{
position<span%20class="token punctuation">: relative<span%20class="token punctuation">;
max<span%20class="token operator">-width<span%20class="token punctuation">: <span%20class="token number">600px<span%20class="token punctuation">;
margin<span%20class="token punctuation">: <span%20class="token number">10<span%20class="token operator">% auto<span%20class="token punctuation">;
padding<span%20class="token punctuation">: <span%20class="token number">15px<span%20class="token punctuation">;
animation<span%20class="token punctuation">: fadeinB <span%20class="token number">.6s infinite<span%20class="token punctuation">;
<span%20class="token operator">-moz<span%20class="token operator">-animation<span%20class="token punctuation">: fadeinB <span%20class="token number">.6s infinite<span%20class="token punctuation">;
<span%20class="token comment">/* Firefox */
<span%20class="token operator">-webkit<span%20class="token operator">-animation<span%20class="token punctuation">: fadeinB <span%20class="token number">.6s infinite<span%20class="token punctuation">;
<span%20class="token comment">/* Safari and Chrome */
<span%20class="token operator">-o<span%20class="token operator">-animation<span%20class="token punctuation">: fadeinB <span%20class="token number">1s infinite<span%20class="token punctuation">;
<span%20class="token comment">/* Opera */
animation<span%20class="token operator">-iteration<span%20class="token operator">-count<span%20class="token punctuation">: <span%20class="token number">1<span%20class="token punctuation">;
<span%20class="token operator">-webkit<span%20class="token operator">-animation<span%20class="token operator">-iteration<span%20class="token operator">-count<span%20class="token punctuation">: <span%20class="token number">1<span%20class="token punctuation">;
<span%20class="token comment">/* Safari 和 Chrome */
<span%20class="token punctuation">}
<span%20class="token punctuation">.gotop<span%20class="token operator">-pop<span%20class="token operator">-box <span%20class="token punctuation">{
background<span%20class="token punctuation">: <span%20class="token shell-comment comment">#fff;
padding<span%20class="token punctuation">: <span%20class="token number">20px<span%20class="token punctuation">;
text<span%20class="token operator">-align<span%20class="token punctuation">: center<span%20class="token punctuation">;
<span%20class="token punctuation">}
<span%20class="token punctuation">.gotop<span%20class="token operator">-pop<span%20class="token operator">-box h3 <span%20class="token punctuation">{
text<span%20class="token operator">-align<span%20class="token punctuation">: center<span%20class="token punctuation">;
<span%20class="token punctuation">}
<span%20class="token punctuation">.gotop<span%20class="token operator">-pop<span%20class="token operator">-box<span%20class="token operator">-close <span%20class="token punctuation">{
position<span%20class="token punctuation">: absolute<span%20class="token punctuation">;
right<span%20class="token punctuation">: <span%20class="token number">0<span%20class="token punctuation">;
top<span%20class="token punctuation">: <span%20class="token number">0<span%20class="token punctuation">;
font<span%20class="token operator">-size<span%20class="token punctuation">: <span%20class="token number">24px<span%20class="token punctuation">;
color<span%20class="token punctuation">: <span%20class="token shell-comment comment">#aaa;
<span%20class="token punctuation">}
@keyframes fadeinB <span%20class="token punctuation">{
<span%20class="token number">0<span%20class="token operator">% <span%20class="token punctuation">{
transform<span%20class="token punctuation">: <span%20class="token function">translateY<span%20class="token punctuation">(<span%20class="token number">20px<span%20class="token punctuation">)<span%20class="token punctuation">;
opacity<span%20class="token punctuation">: <span%20class="token number">0<span%20class="token punctuation">;
filter<span%20class="token punctuation">: <span%20class="token function">Alpha<span%20class="token punctuation">(opacity<span%20class="token operator">=<span%20class="token number">0<span%20class="token punctuation">)<span%20class="token punctuation">;
<span%20class="token punctuation">}
<span%20class="token number">100<span%20class="token operator">% <span%20class="token punctuation">{
transform<span%20class="token punctuation">: <span%20class="token function">translateY<span%20class="token punctuation">(<span%20class="token number">0px<span%20class="token punctuation">)<span%20class="token punctuation">;
opacity<span%20class="token punctuation">: <span%20class="token number">1<span%20class="token punctuation">;
filter<span%20class="token punctuation">: <span%20class="token function">Alpha<span%20class="token punctuation">(opacity<span%20class="token operator">=<span%20class="token number">1<span%20class="token punctuation">)<span%20class="token punctuation">;
<span%20class="token punctuation">}
<span%20class="token punctuation">}
<span%20class="token punctuation">.fadeinB <span%20class="token punctuation">{
animation<span%20class="token punctuation">: fadeinB <span%20class="token number">.6s infinite<span%20class="token punctuation">;
<span%20class="token operator">-moz<span%20class="token operator">-animation<span%20class="token punctuation">: fadeinB <span%20class="token number">.6s infinite<span%20class="token punctuation">;
<span%20class="token comment">/* Firefox */
<span%20class="token operator">-webkit<span%20class="token operator">-animation<span%20class="token punctuation">: fadeinB <span%20class="token number">.6s infinite<span%20class="token punctuation">;
<span%20class="token comment">/* Safari and Chrome */
<span%20class="token operator">-o<span%20class="token operator">-animation<span%20class="token punctuation">: fadeinB <span%20class="token number">1s infinite<span%20class="token punctuation">;
<span%20class="token comment">/* Opera */
animation<span%20class="token operator">-iteration<span%20class="token operator">-count<span%20class="token punctuation">: <span%20class="token number">1<span%20class="token punctuation">;
<span%20class="token operator">-webkit<span%20class="token operator">-animation<span%20class="token operator">-iteration<span%20class="token operator">-count<span%20class="token punctuation">: <span%20class="token number">1<span%20class="token punctuation">;
<span%20class="token comment">/* Safari 和 Chrome */
<span%20class="token punctuation">}
教程到此就结束了，完成以上步骤后，去网站前端看看效果吧，如果有疑问可以加入我们的WordPress交流群。
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"www.yuankufang.com",如遇到无法解压的请联系管理员！
源库坊 » 给WordPress博客添加返回顶部/底部的教程
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"www.yuankufang.com",如遇到无法解压的请联系管理员！
源库坊 » 给WordPress博客添加返回顶部/底部的教程
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或 联络我们.。
- 找不到素材资源介绍文章里的示例图片？
- 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。
- 源库坊
- 一个高级程序员模板开发平台
