返回顶部，到达顶部消失（移动端）

最新推荐文章于 2024-03-19 10:15:00 发布

原创最新推荐文章于 2024-03-19 10:15:00 发布 · 5.1k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了一种使用jQuery实现的网页滚动监听机制，并在滚动到一定高度时动态添加返回顶部按钮的功能。该方法能够根据页面滚动位置显示或隐藏按钮，并通过平滑动画将页面滚动回顶部。

(function ($) {
    //判断页面高度,如果滚到指定高度添加top按钮
    var minHeight = $(window).height() /2;     
    var btnHtml = '<a href="javascript:;" class="btn-gotop" id="btnGotop2"></a>';

    /*
    $("body").append(btnHtml);

    $("#btnGotop2").on("click", function () {
        $(".scroll-wrap").animate({ scrollTop: 0 }, 1000);
        return;
    });
    */



    $(".scroll-wrap").scroll(function () {
        var nScrollTop = $(".scroll-wrap").scrollTop();
        if (nScrollTop > minHeight && $("#btnGotop2").size() < 1) {
            $("body").append(btnHtml);
            $("#btnGotop2").on("click", function () {
                $(".scroll-wrap").animate({ scrollTop: 0 }, 1000);
                return;
            })

        } else if (nScrollTop < minHeight) {
            $("#btnGotop2").fadeOut(function () {
                $(this).remove();
            })
        }
    });




})(jQuery)