-jq-offset()-position()-scrollLeft()||Top()-偏移-距离文档（body）-滚动-
用户投稿 学习笔记 20阅读
01-jq-偏移-offset()-距离文档 <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { position: relative; width: 200px; height: 200px; background-color: pink; margin-left: 100px; } .son { position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; background-color: red; } </style> <script src="../js/jquery-1.12.4.min.js"></script></head><body> <div class="box"> <div class="son"></div> </div> <script> $(function () { const $son = $('.son') // 获取偏移 console.log($son.offset()) // 获取具体值：.left || top console.log($son.offset().left) // 数字（方便加工） // 可以修改 $son.offset({ left: 300 }) // 本质是在原来的自身的left基础之上，修改自己的left }) </script></body></html>
注意： 1.可以修改，但是修改本质是在自己的基础之上，修改自己的值。 2.是距离文档，就是body。
02-jq-偏移-postion()-定位偏移 <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { position: relative; width: 200px; height: 200px; background-color: pink; margin-left: 100px; } .son { position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; background-color: red; } </style> <script src="../js/jquery-1.12.4.min.js"></script></head><body> <div class="box"> <div class="son"></div> </div> <script> $(function () { const $son = $('.son') // 获取定位偏移 console.log($son.position()) // 到定位父级的偏移（原来原生的offset家族中的：偏移部分） // 获取数据 console.log($son.position().left) }) </script></body></html>注意： 1.获取定位偏移，到定位父级的偏移（原来原生的offset家族中的：偏移部分） 2.只能获取，不能修改。
03-jq-偏移-滚动偏移-scrollLeft()-scrollTop() <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { width: 2000px; height: 2000px; } </style> <script src="../js/jquery-1.12.4.js"></script></head><body> <script> // 原生滚动 // window.onscroll = function () { // console.log('原生滚动了', pageXOffset, pageYOffset) // } // jq滚动：将原生对象转成jq对象，将事件去掉on即可 $(function () { $(window).scroll(function () { console.log('jq滚动了') // console.log($(this)) // 获取滚动距离 // scrollLeft() || scrollTop() console.log($(this).scrollLeft(), $(this).scrollTop()) // $(this).scrollTop(500) // 实际开发中为了兼容处理，不会给window加滚动距离 $('html,body').scrollTop(0) // 实际浏览器的支持：一般要么是html，要么是body }) }) </script></body></html>注意： 1.实际浏览器的支持：一般要么是html，要么是body:所以写法为：$('html,body').scrollTop(0)
标签：