网页下拉一屏后显示返回顶部按钮的JS代码

2022-03-08 17:51:26 by 极墨笔记 in PHP

需要加载jq

<script>
    $(function(a) {
        a.fn.scrollToTop = function(c) {
            const d = {
                speed: 800
            };
            c && a.extend(d, {
                speed: c
            });
            return this.each(function() {
                const b = a(this);
                a(window).scroll(function() {
                    100 < a(this).scrollTop() ? b.fadeIn() : b.fadeOut()
                });
                b.click(function(b) {
                    b.preventDefault();
                    a("body, html").animate({
                            scrollTop: 0
                        },
                        d.speed)
                })
            })
        }
    });
    $(function() {
        const aHtml = '<a href="javascript:void(0)" id="toTop" style="display:none;position:fixed;bottom:110px;right:10px;width:45px;height:45px;border-radius:50%;overflow:hidden;background-image:url(/static/images/top.png);background-repeat:no-repeat;background-position:center;z-index:999;cursor:pointer;border:1px solid #d8d8d8;box-sizing:border-box;opacity:0.9;"></a>';
        $("body").append(aHtml);
        $("#toTop").scrollToTop(300);
    });
</script>

按钮图片是/static/images/top.png，自己下载放置。