怎么用jquery结合css实现返回顶部功能
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍“怎么用jquery结合css实现返回顶部功能”，在日常操作中，相信很多人在怎么用jquery结合css实现返回顶部功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用jquery结合css实现返回顶部功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
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 class="lazy" data-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 class="lazy" data-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 class="div5"> <h2>hello</h2> <h2>hello</h2> <h2>hello</h2> <h2>hello</h2> <h2>hello</h2> <h2>hello</h2> <h2>hello</h2> <h2>hello</h2> <h2>hello</h2> <h2>hello</h2> </div> <div class="div6"> <button onclick="returnTop1()">return</button> </div> <div class="div7 hide" onclick="returnTop()">返回顶部</div> <script class="lazy" data-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>实例扩展：
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实现返回顶部功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
