给WordPress博客添加返回顶部/底部的教程

今天给大家分享下路途吧返回顶部那块的制作教程，其实也不难，主要是用到html、css和一些jq代码。

效果图如下图所示：

废话不多说，我们开始教程：

首先我们把下面的html代码添加到主题footer.php文件的上面：

                \\\\\\\\\\\\\\\" rel=\\\\\\\\\\\\\\\"external nofollow\\\\\\\\\\\\\\\"  rel=\\\\\\\\\\\\\\\'nofollow\\\\\\\\\\\\\\\' class=\\\\\\\\\\\\\\\"uk-display-block b-b\\\\\\\\\\\\\\\">                        
        
                
                        
微信
                                                                
        

可以看到在右侧按钮上面是有Icon图标的，所以我们还需要加载一个Icon图标，把下面的一行代码添加到header.php的标签上面，加载Icon样式。

Icon图标

如果你的博客有Icon图标样式，可以不用添加上面的代码，用自己的图标

然后我们添加js代码，将下面代码添加到footer.php文件的上面：

以上代码依赖jquery，请确保你的博客已经加载jquery文件。

最后就是css样式了， 将下面代码添加到header.php文件的上面，也可以添加到主题的样式文件内，一般是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交流群。

WordPress建站交流群：8424781