给博客添加一个返回顶部按钮

为什么给博客增加一个返回顶部呢

最近我发现博客用ajax加载文章过于太长了，所以加了一个返回顶部的按钮

jQuery代码

function goTop(min_height) {
        $(".goTop").click(
            function() {
                $('html,body').animate({
                    scrollTop: 0
                }, 700);
            });
        //获取页面的最小高度，无传入值则默认为600像素
        min_height=min_height?min_height:400;
        //为窗口的scroll事件绑定处理函数
        $(window).scroll(function() {
            //获取窗口的滚动条的垂直位置
            var s = $(window).scrollTop();
            //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐
            if (s > min_height) {
                $(".goTop").fadeIn(100);
            } else {
                $(".goTop").fadeOut(200);
            }
        });
    }
 
    $(function() {
        goTop();
});

把这段代码复制主题的js文件里

样式代码

    <div class="goTop">
        <span class="iconfont icon-rising"></span>
    </div>

这个是返回顶部的样式代码，复制到主题文件的footer.php中就可以了，[colour type=" red"]所使用到的是iconfont图标，请根据你的图标库填写[/colour]

Css代码

.goTop {
    height: 40px;
    width: 40px;
    background-color: #F0F0F0;
    border-radius: 50px;
    position: fixed;
    top: 80%;
    right: 3%;
    display: none;
}
.goTop span {
    font-size: 25px;
    color: #000000;
    position: absolute;
    top: 7px;
    left: 7px;
}

这是返回顶部的样式css代码，把代码复制到主题的css文件中即可，[colour type=" red"]不喜欢这种样式的可以自行修改[/colour]