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

今天给大家分享下更多技术教程，请关注懒猫导航网 返回顶部那块的制作教程，其实也不难，主要是用到html、css和一些jq代码。

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

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

<div class=\"gotop\">
    <a id=\"top\"><i class=\"iconfont icon-arrow-up\"></i></a>
    <a href=\"<?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://www.jishujc.com/wp-content/uploads/2020/02/2020020408254925.jpg\" />
        </div>
    </div>
</div>

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

<link rel=\"stylesheet\" href=\"https://at.alicdn.com/t/font_1557485_rig7wtgjqd.css\" rel=\"external nofollow\"  />

Icon图标

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

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

<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文件的上面，也可以添加到主题的样式文件内，一般是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 */
}

教程到此就结束了，完成以上步骤后，去网站前端看看效果吧，更多技术教程，请关注懒猫导航网