您好,登錄后才能下訂單哦!
這篇文章主要介紹“怎么用jquery結(jié)合css實(shí)現(xiàn)返回頂部功能”,在日常操作中,相信很多人在怎么用jquery結(jié)合css實(shí)現(xiàn)返回頂部功能問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”怎么用jquery結(jié)合css實(shí)現(xiàn)返回頂部功能”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
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])
實(shí)例返回頂部
<!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>--> <!-- // 計(jì)算離視口偏移量--> <!-- console.log($('.div1').offset().left); // 0--> <!-- console.log($('.div1').offset().top); // 0--> <!-- console.log($('.div3').offset().left); // 0--> <!-- console.log($('.div3').offset().top); // 100--> <!-- // 計(jì)算離已定位的父標(biāo)簽的偏移量(注意是已定位)--> <!-- console.log($('.div3').position().left); // 0--> <!-- console.log($('.div3').position().top); // 0--> <!-- // 計(jì)算標(biāo)簽尺寸--> <!-- 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>--> <!--滾動(dòng)條監(jiān)聽(tīng)并返回頂部實(shí)例--> <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 src="jquery-3.3.1.js"></script> <script> window.onscroll=function () { // onscroll 事件在元素滾動(dòng)條在滾動(dòng)時(shí)觸發(fā)(window對(duì)象事件) let num=$(window).scrollTop(); // 左右滾動(dòng)條是scrollLeft // scrollTop() 方法返回或設(shè)置匹配元素的滾動(dòng)條的垂直位置(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>
實(shí)例擴(kuò)展:
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(); }); })();:
到此,關(guān)于“怎么用jquery結(jié)合css實(shí)現(xiàn)返回頂部功能”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。