<!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实例
原文地址：https://www.cnblogs.com/huanghuali/p/9529593.html