MyFirstBlog/MyBlog/templates/back_to_top_func.html

<button type="button" id="BackTop" class="back-to-top" style="z-index: 100;"></button>

<script>
    //向上滚动的函数
    $(function () {
        $('#BackTop').click(function () {
            $('html,body').animate({scrollTop: 0}, 500);
        });
        $(window).scroll(function () {
            if ($(this).scrollTop() > 300) {
                $('#BackTop').fadeIn(300);
            } else {
                $('#BackTop').stop().fadeOut(300);
            }
        }).scroll();
    })
</script>

<style>
    /* 按钮边框的大小、位置、样式 */
    .back-to-top {
        position: fixed;
        display: none;
        background: #ffffff;
        color: #fff;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 1;
        font-size: 16px;
        border-radius: 50%;
        right: 15px;
        bottom: 15px;
        transition: background 0.5s;
        z-index: 11;
    }

    .back-to-top i {
        padding-top: 12px;
        color: #fff;
    }

    @media (max-width: 768px) {
        .back-to-top {
            bottom: 15px;
        }
    }
</style>