返回顶部按钮

最新推荐文章于 2019-12-24 22:49:50 发布

JYYYYYYYYYY

最新推荐文章于 2019-12-24 22:49:50 发布

阅读量332

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/aa97257540/article/details/70843704

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

返回顶部按钮，在往下滑动的时候才会显示，在顶部的时候不会显示

<a href="#top"><div onclick="$('html,body').animate({ scrollTop: 0 }); return false;" id="to_top" style="display: none;">返回顶部</div></a>
<script>
$(window).scroll(function () {
        // 目的のスクロール量を設定(px)
        var TargetPos = 100;
        // 現在のスクロール位置を取得
        var ScrollPos = $(window).scrollTop();
        // 現在位置が目的のスクロール量に達しているかどうかを判断
        if( ScrollPos >= TargetPos) {
            // 達していれば表示
            $("#to_top").fadeIn();
        }
        else {
            // 達していなければ非表示
            $("#to_top").fadeOut();
        }
    });
</script>