如何WordPress博客添加返回顶部/底部的教程-新起点博客

返回顶部那块的制作教程，其实也不难，主要是用到html、css和一些jq代码。效果图如下图所示：

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

<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.henenseo.com/wp-content/themes/Nana/images/gongzhonghao.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 */
}

教程结束，操作完以后大家可以去页面中看一下效果。