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 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(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"> <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>
實例擴展:
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操作內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- jQuery中的CSS樣式屬性css()及width()系列大全
- JQuery實現電梯導航特效
- JQuery實現電梯導航效果
- JavaScript實現三種常用網頁特效(offset、client、scroll系列)
- jquery實現頁面彈球效果