移动端滑动时出现一段时间之后消失的提示性模块

<style>
/*回到首页样式*/
.goBackIndex{
    max-width:750px;
    position:fixed;
    width:100%;
    height:1.16rem;
    background-color:rgba(255,255,255,0.9);
    bottom:0px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    justify-content:space-between;
    padding:0 0.3rem;
    align-items:center;
    margin:0 auto;
}
.goBackIndex img{
    height:0.72rem;
}
.goBackIndex a{
    width:1.14rem;
    height:0.68rem;
    border-radius:15px;
    line-height:0.68rem;
    text-align:center;
    background-color:#fa8c14;
    color:#fff;
    font-size:0.24rem;
}
.goBackIndex.none{
    display:none;
}
</style>
<script>
var timer;
function appendEle(el) {
    if (!(el instanceof jQuery)) {
        el = $(el)
    }

    $('<div class="goBackIndex">' +
        '<img src="/Content/images/icon_IndexForWap-logo.png" alt="Alternate Text" />' +
        '<a href="/wap">回到首页</a>' +
    '</div>').appendTo(el);

    $("body").on("touchmove", function () {
        clearTimeout(timer);
        if (!$(".goBackIndex").hasClass("none")) {
            $(".goBackIndex").addClass("none")
        }
    })

    $("body").on("touchend", function () {
        if ($(".goBackIndex").hasClass("none")) {
            $(".goBackIndex").removeClass("none")
        }
        timer = setTimeout(function () {
            $(".goBackIndex").addClass("none");
        }, 4000)
    })

    setTimeout(function () {
        $(".goBackIndex").addClass("none");
    }, 4000)
}

//调用方式
appendEle(document.getElementsByClassName("page-wrapper")[0]);
</script>