Javascrip

jquery实现返回顶部功能


html代码部分

<style>
    body {
        height: 2000px;
    }
    .back {
        position: fixed;
        width: 100px;
        height: 50px;
        right: 30px;
        bottom: 100px;
        display: none;
    }
    .container {
        width: 900px;
        height: 500px;
        background-color: skyblue;
        margin: 400px auto;
    }
</style>
<div class="back">返回顶部</div>
<div class="container"></div>


javascript代码部分

<script>
    $(function () {
        $(window).scroll(function () {
            //检测滚走的高度
            var scrollT = $(document).scrollTop();
            //当滚走的高度>=400(天蓝色色块的上边距),
            //显示返回顶部(.back),否则隐藏返回顶部
            //获取蓝色色块(container)距离文档顶部的距离
            var offsetT = $(".container").offset().top;
            //进行判断
            if (scrollT >= offsetT) {
                $(".back").show()
            } else {
                $(".back").hide()
            }
        })
        
        //点击返回顶部,页面滚走的距离设置为0
        $(".back").click(function(){
            //生硬的返回
            // $(document).scrollTop(0)
            //动感的返回
            //animate({键:值},时间) 属性:scrollTop---必须是被元素调用
            $("html,body").animate({
                scrollTop:0
            },1000)
        })
    })
</script>


0.074301s