css操作
css $("").css(name|pro|[,val|fn]) 位置 $("").offt([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 chart="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") } el { $(".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{ displ篮球火剧情ay: 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 chart="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: agreen; } .div2{ position: relative; } .div4{ background-color: aquamarine; width: 150px; height: 150px; padding: 5px; m反比打一字argin: 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').offt().left); // 0--><!-- console.log($('.div1').offt().top); // 0--><!-- console.log($('.div3').offt().left); // 0--><!-- console.log($('.div3').offt().top); // 100--><!-- // 计算离已定位的父标签的偏移量(注意是已定位)--><!-- console.log($('.div3').position().left); // 0--><!-- console.log($('.div3').position().top); // 0--><!-- // 计算标签尺寸--><!-- console.log($('.div4').height()); // 150(width: 150px)--><!-- // console.log($('.div4').he定积分和不定积分区别ight('200px')) // 高度变成200px--><!-- console.log($('.div4').innerheight()); // 160(width: 150px+padding: 5px+padding: 5px)--><!-- console.log($('.div4').outerhe网名英语女生ight()); // 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 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'); }el{ $('.div7').addclass('hide'); }; }; function returntop() { $(window).scrolltop(0); }; function returntop1() { $('.div5').scrolltop(0); }; </script></body></html>实例扩展：
css：
.backtotop {display: none;width: 18px;line-height: 1.2;padding: 5px 0;background-color: #000;color: #fff;font-size: 12px;text-align: center;position: fixed;_position: absolute;right: 10px;bottom: 100px;_bottom: "auto";cursor: pointer;opacity: .6;filter: alpha(opacity=60);}jquery代码
(function() { var $backtotoptxt = "返回顶部", $backtotopele = $('<div class="backtotop"></div>').appendto($("body")) .text($backtotoptxt).attr("title", $backtotoptxt).click(function() { $("html, body").animate({ scrolltop: 0 }, 120); }), $backtotopfun = function() { var st = $(document).scrolltop(), winh = $(window).height(); (st > 0)? $backtotopele.show(): $backtotopele.hide(); //ie6下的定位 if (!window.xmlhttprequest) { $backtotopele.css("top", st + winh - 166); } }; $(window).bind("scroll", $backtotopfun); $(function() { $backtotopfun(); }); })();： 到此这篇关于jquery结合css实现返回顶部功能的文章就介绍到这了,更多相关jquery的css操作内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
本文发布于:2023-04-03 21:51:39，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/711c76dd83777c05b57426a9dc909b65.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：jquery结合css实现返回顶部功能.doc
本文 PDF 下载地址：jquery结合css实现返回顶部功能.pdf
| 留言与评论（共有 0 条评论） |
