<!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({ "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>
效果图：
