<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .div1{ height: 100px; width: 100px; background-color: red; } .div3{ height: 120px; width: 120px; background-color: seagreen; } .div2{ position: relative; } .div4{ background-color: aquamarine; width: 150px; height: 150px; padding: 5px; margin: 6px; border: 4px solid green; } .div5{ width: 50%; height: 200px; overflow: auto; } .div6{ width: 100%; height: 1000px; } .div5{ background-color: aquamarine; } .div6{ background-color: chocolate; } .div7{ width: 90px; height: 60px; position: fixed; right: 20px; bottom: 20px; background-color: yellow; text-align: center; /*文本横向居中*/ line-height: 60px; /*文本行高*/ } .hide{ display: none; } </style> </head> <body> <!-- <div ></div>--> <!-- <div >--> <!-- <div ></div>--> <!-- </div>--> <!-- <div ></div>--> <!-- <script src="jquery-3.3.1.js"></script>--> <!-- <script>--> <!-- // 计算离视口偏移量--> <!-- console.log($(‘.div1‘).offset().left); // 0--> <!-- console.log($(‘.div1‘).offset().top); // 0--> <!-- console.log($(‘.div3‘).offset().left); // 0--> <!-- console.log($(‘.div3‘).offset().top); // 100--> <!-- // 计算离已定位的父标签的偏移量(注意是已定位)--> <!-- console.log($(‘.div3‘).position().left); // 0--> <!-- console.log($(‘.div3‘).position().top); // 0--> <!-- // 计算标签尺寸--> <!-- console.log($(‘.div4‘).height()); // 150(width: 150px)--> <!-- // console.log($(‘.div4‘).height(‘200px‘)) // 高度变成200px--> <!-- console.log($(‘.div4‘).innerHeight()); // 160(width: 150px+padding: 5px+padding: 5px)--> <!-- console.log($(‘.div4‘).outerHeight()); // 168(width: 150px+padding: 5px+padding: 5px+border: 4px+border: 4px)--> <!-- console.log($(‘.div4‘).outerHeight(true)); // 180(width: 150px+padding: 5px+padding: 5px+border: 4px+border: 4px+margin: 6px+margin: 6px)--> <!-- </script>--> <!--滚动条监听并返回顶部实例--> <div > <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> </div> <div > <button onclick="returnTop1()">return</button> </div> <div onclick="returnTop()">返回顶部</div> <script src="jquery-3.3.1.js"></script> <script> window.onscroll=function () { // onscroll 事件在元素滚动条在滚动时触发(window对象事件) let num=$(window).scrollTop(); // 左右滚动条是scrollLeft // scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置(jquery) console.log(num); if (num>100) { $(‘.div7‘).removeClass(‘hide‘); }else{ $(‘.div7‘).addClass(‘hide‘); }; }; function returnTop() { $(window).scrollTop(0); }; function returnTop1() { $(‘.div5‘).scrollTop(0); }; </script> </body> </html>
jquery的css *** 作
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）