今天给大家分享下添加返回顶部/底部的WordPress教程，其实也不难，主要是用到html、css和一些jq代码。
效果图如下图所示：
我们开始教程：
首先我们把下面的html代码添加到WordPress主题footer.php文件的</body>上面：
<div class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”gotop\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>
<a id=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”top\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”><i class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”iconfont icon-arrow-up\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”></i></a>
<a href=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”https://www.wpzt.net/<?php echo $gotop[\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’qq_url\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’]?>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” rel=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”external nofollow\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” rel=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’nofollow\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”uk-display-block b-b\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”><i class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”iconfont icon-qq\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”></i></a>
<a class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”wechat\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”><i class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”iconfont icon-wechat\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”></i></a>
<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\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”></i></a>
<a id=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”footer\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”><i class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”iconfont icon-arrow-down\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”></i></a>
</div>
<div class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”gotop-pop\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>
<div class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”gotop-pop-main\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>
<div class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”gotop-pop-box uk-overflow-hidden\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>
<h3>微信</h3>
<i class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”iconfont icon-icon-test25 gotop-pop-box-close\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”></i>
<img src=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”https://wtoo.cxcat.com/wp-content/uploads/2020/02/2020020408254925.jpg\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” />
</div>
</div>
</div>
可以看到在右侧按钮上面是有Icon图标的，所以我们还需要加载一个Icon图标，把下面的一行代码添加到header.php的</head>标签上面，加载Icon样式。
<link rel=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”stylesheet\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” href=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”https://at.alicdn.com/t/font_1557485_rig7wtgjqd.css\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” rel=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”external nofollow\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” />复制
Icon图标
如果你的博客有Icon图标样式，可以不用添加上面的代码，用自己的图标
然后我们添加js代码，将下面代码添加到footer.php文件的</body>上面：
<script>
$(window).scroll(function() {
var scroll_top = $(window).scrollTop();
if(scroll_top >= 200) {
$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”.gotop\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).fadeIn();
} else {
$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”.gotop\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).fadeOut();
}
});
$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”#top\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).click(function() {
$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”html,body\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).finish().animate({
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”scrollTop\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”: $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”.top\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).offset().top
}, 500);
});
$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”#footer\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).click(function() {
$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”html,body\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).finish().animate({
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”scrollTop\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”: $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”.bottom\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).offset().top
}, 500);
});
$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’.wechat\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’).click(function() {
$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’.gotop-pop\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’).toggle();
});
$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’.gotop-pop-box-close\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’).click(function() {
$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’.gotop-pop\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’).hide()
});
</script>
以上代码依赖jquery，请确保你的博客已经加载jquery文件。
最后就是css样式了， 将下面代码添加到header.php文件的</head>上面，也可以添加到主题的样式文件内，一般是style.css这个文件。（为了方便二次修改，css样式代码没有压缩，代码比较长，可以直接点击复制）
/*
* ——————————————————————————
* 返回顶部样式
* ——————————————————————————
*/
.gotop {
position: fixed;
bottom: 0;
right: 0;
margin: 30px;
display: none;
overflow: hidden;
border-radius: 4px;
border: 1px solid #eee;
}
.gotop a {
display: block;
padding: 10px 13px;
background-color: #fff;
transition: all .3s ease;
color: #888;
background: #fff;
border-bottom: 1px solid #eee;
text-decoration: none;
cursor: pointer;
}
.gotop a:hover {
color: #fff;
background: #2c63ff;
box-shadow: -3px 2px 10px -2px #2c63ff;
transform: translateY(-3px);
border: 0
}
.gotop a:last-child {
border: 0
}
.gotop i {
font-size: 18px
}
.gotop-pop {
position: fixed;
width: 100%;
height: 100%;
background: #00000030;
display: none;
top: 0;
transition: all .3s;
}
.gotop-pop-main {
position: relative;
max-width: 600px;
margin: 10% auto;
padding: 15px;
animation: fadeinB .6s infinite;
-moz-animation: fadeinB .6s infinite;
/* Firefox */
-webkit-animation: fadeinB .6s infinite;
/* Safari and Chrome */
-o-animation: fadeinB 1s infinite;
/* Opera */
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
/* Safari 和 Chrome */
}
.gotop-pop-box {
background: #fff;
padding: 20px;
text-align: center;
}
.gotop-pop-box h3 {
text-align: center;
}
.gotop-pop-box-close {
position: absolute;
right: 0;
top: 0;
font-size: 24px;
color: #aaa;
}
@keyframes fadeinB {
0% {
transform: translateY(20px);
opacity: 0;
filter: Alpha(opacity=0);
}
100% {
transform: translateY(0px);
opacity: 1;
filter: Alpha(opacity=1);
}
}
.fadeinB {
animation: fadeinB .6s infinite;
-moz-animation: fadeinB .6s infinite;
/* Firefox */
-webkit-animation: fadeinB .6s infinite;
/* Safari and Chrome */
-o-animation: fadeinB 1s infinite;
/* Opera */
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
/* Safari 和 Chrome */
}
WordPress教程到此就结束了，完成以上步骤后，去网站前端看看效果吧。