jquery实现返回顶部功能

本文主要是介绍jquery实现返回顶部功能，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

先来看看效果，当滚动的距离超过蓝色方块的时候，就会显示返回顶部的文字，这时候点击返回顶部就会自动返回顶部

<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>

<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>

这篇关于jquery实现返回顶部功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！