jQuery中animate与scrollTop、offset().top实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>scrollTop与offset.top、animate</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        body {
            margin: 0 auto;
            max-width: 640px;
            background-color: #fbfbfb;
            padding: 10px;
        }

        .bd {
            height: 1650px;
            overflow: hidden;
        }

        .btn_animate {
            position: absolute;
            width: 120px;
            height: 30px;
            line-height: 30px;
            background-color: rgb(129, 26, 26);
            color: #fff;
            text-align: center;
        }

        .btn_ho {
            position: absolute;
            top: 40px;
            left: 0;
            width: 120px;
            height: 30px;
            line-height: 30px;
            background-color: rebeccapurple;
            border-radius: 5px;
            color: #fff;
            text-align: center;
            margin: 10px 0;
        }

        .btn_go {
            position: absolute;
            left: 0;
            top: 90px;
            height: 30px;
            line-height: 30px;
            width: 150px;
            background-color: plum;
            border-radius: 5px;
            text-align: center;
        }

        .hide {
            position: absolute;
            top: 160px;
            left: 0;
            display: none;
            width: 100px;
            height: 30px;
            background-color: orange;
        }
        .btn_top{ overflow: hidden; height: 30px;line-height: 30px; width: 130px; text-align: center; background-color: navy; border-radius: 5px; color: #fff;}
        .btn_top_r{ overflow: hidden; height: 30px;line-height: 30px; width: 130px; text-align: center; background-color: rgb(11, 104, 84); border-radius: 5px; color: #fff;}
    </style>
</head>

<body>
    <div class="bd">
        <div style="height: 400px; background-color: rgb(33, 107, 172); position: relative;" id="demo">
            <div class="btn_animate" id="btnAnimate">点击向左移动</div>
            <div class="btn_ho" id="btnHo">点击切换</div>
            <div class="hide" id="hide">后显示</div>
            <div class="btn_go" id="go">点击变化</div>
        </div>
        <h2>注意：用animate效果的时候样式一定要定位</h2>
        <div style="height: 500px; background-color: rgb(34, 59, 99)" id="floor"></div>
        <div style="height: 500px; background-color: orangered"></div>
        <div class="btn_top" id="btnTop">scrollTop:top</div>
        <div class="btn_top_r" id="btnTop_r">offset().top</div>

    </div>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function () {
            // 让指定元素左右移动
            $("#btnAnimate").on("click", function () {
                $(this).animate({
                    left: '+150px'
                }, "slow");
            });
            //在600毫秒内切换段落的高度和透明度
            $("#btnHo").on("click", function () {
                $("#btnAnimate").animate({
                    height: 'toggle',
                    opacity: 'toggle'
                }, "slow");
            });
            //用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）
            $("#go").click(function () {
                $("#hide").animate({
                    width: "40%",
                    height: "100%",
                    fontSize: "20px",
                    left: 50,
                    opacity: 'show'
                }, 500);

            });
            $("#btnTop").on("click",function(){
                //html,body是兼容Firfox与Chrome
                $("html,body").animate({"scrollTop":top})
            })
            $("#btnTop_r").on("click",function(){
                $("html,body").scrollTop($("#floor").offset().top - 50)
            })

        });
    </script>
</body>

</html>
效果图：
jQuery中animate与scrollTop、offset().top实例

推荐阅读
