css操作
CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
实例返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-2.2.3.js"></script> <script> window.onscroll=function(){ var current=$(window).scrollTop(); console.log(current) if (current>100){ $(".returnTop").removeClass("hide") } else { $(".returnTop").addClass("hide") } } function returnTop(){ // $(".div1").scrollTop(0); $(window).scrollTop(0) } </script> <style> body{ margin: 0px; } .returnTop{ height: 60px; width: 100px; background-color: darkgray; position: fixed; right: 0; bottom: 0; color: greenyellow; line-height: 60px; text-align: center; } .div1{ background-color: orchid; font-size: 5px; overflow: auto; width: 500px; } .div2{ background-color: darkcyan; } .div3{ background-color: aqua; } .div{ height: 300px; } .hide{ display: none; } </style> </head> <body> <div class="div1 div"> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> </div> <div class="div2 div"></div> <div class="div3 div"></div> <div class="returnTop hide" onclick="returnTop();">返回顶部</div> </body> </html>
<!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 class="div1"></div>--> <!-- <div class="div2">--> <!-- <div class="div3"></div>--> <!-- </div>--> <!-- <div class="div4"></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( 150px)--> <!-- // console.log($('.div4').height('200px')) // 高度变成200px--> <!-- console.log($('.div4').innerHeight()); // 160( 150px+padding: 5px+padding: 5px)--> <!-- console.log($('.div4').outerHeight()); // 168( 150px+padding: 5px+padding: 5px+border: 4px+border: 4px)--> <!-- console.log($('.div4').outerHeight(true)); // 180( 150px+padding: 5px+padding: 5px+border: 4px+border: 4px+margin: 6px+margin: 6px)--> <!-- </script>--> <!--滚动条监听并返回顶部实例--> <div class="div5"> <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 class="div6"> <button onclick="returnTop1()">return</button> </div> <div class="div7 hide" 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>