给博客添加一个返回顶部按钮
2021年07月15日 博客 2 评论
447
2021-07-15 博客 2 评
为什么给博客增加一个返回顶部呢

最近我发现博客用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中就可以了,所使用到的是iconfont图标,请根据你的图标库填写

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文件中即可,不喜欢这种样式的可以自行修改

以上就是本博客所用到的代码

最后更新 2021-10-18
OωO
隐私评论
  1. 皮小韩

    建议出个教程

    08月28日 22:46回复
    1. 羡鱼
      认证信息:博客站长
      @皮小韩

      谢谢提醒,已添加教程

      08月28日 23:39回复