置顶代码js

<div id="gotop">
    <a class="backTop2">
        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOC43MDEiIGhlaWdodD0iMjQuNDU0IiB2aWV3Qm94PSIwIDAgMTguNzAxIDI0LjQ1NCI+CiAgPHBhdGggaWQ9Iui3r+W+hF8xNzMxNiIgZGF0YS1uYW1lPSLot6/lvoQgMTczMTYiIGQ9Ik0yMDEuNyw3Ni4ySDE4NC44MDZhLjkuOSwwLDEsMSwwLTEuOEgyMDEuN2EuOS45LDAsMCwxLDAsMS44Wm0uNywxMC45NjItOC41MDYtOS45MDZhLjg0My44NDMsMCwwLDAtMS4yNzcsMGwtOC41MDksOS45MDZhLjg0MS44NDEsMCwwLDAsLjY0LDEuMzg5aDQuMDE2djguNTEyYTEuOCwxLjgsMCwwLDAsMS44LDEuOGg1LjM4OGExLjgsMS44LDAsMCwwLDEuOC0xLjhWODguNTQ5aDQuMDE5QS44NDMuODQzLDAsMCwwLDIwMi40LDg3LjE1OFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xODMuOTAzIC03NC40KSIgZmlsbD0iIzkyOWRiMSIvPgo8L3N2Zz4K"
             alt="返回顶部">
    </a>
</div>

<style>
    #gotop {
        position: fixed;
        right: 12px;
        bottom: 12px;
        z-index: 999;
    }

    .backTop2 {
        background-color: #fff;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px 0 rgb(0 0 0 / 16%);
        cursor: pointer;
        border-radius: 4px;
    }

    .backTop2:hover {
        background-color: #d3d3d3;
    }
</style>

<script type="text/javascript">

    window.onload = function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 300) { //计算 //当滚动条的位置处于距顶部200像素以下时，跳转链接出现，否则消失
                $("#gotop").fadeIn(400);
            } else {
                $("#gotop").fadeOut(400);
            }
        });
        $("#gotop").click(function () { //当点击跳转链接后，回到页面顶部位置
            $('body,html').animate({
                scrollTop: 0
            }, 400);

            return false;
        });
    }

</script>