本文實(shí)例為大家分享了JS實(shí)現(xiàn)帶動(dòng)畫的回到頂部效果的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)功能：滾動(dòng)到頁(yè)面某一個(gè)高度的時(shí)候，回到頂部按鈕出現(xiàn)。點(diǎn)擊之后回到網(wǎng)頁(yè)頂部，按鈕隱藏。
代碼如下，jQuery引用的是百度CDN的，因此整段代碼復(fù)制下來后在瀏覽器運(yùn)行即可。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>實(shí)現(xiàn)回到頂部功能</title> </head> <style> * { padding: 0; margin: 0; } .gotop { display: none; position: fixed; bottom: 50px; right: 50px; width: 40px; height: 40px; padding: 5px; background-color: #F00; color: #FFF; text-align: center; cursor: pointer; } </style> <script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script> <body> <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> <div id="goTop" class="gotop"> <p>回到</p> <p>頂部</p> </div> </body> <script> function goTop() { $(window).scroll(function() { var $scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //兼容瀏覽器 if($scrollTop > 100) { //滾動(dòng)高度可調(diào) $("#goTop").show(); } else { $("#goTop").hide(); }; }) $("#goTop").on("click", function() { $("body").stop().animate({ scrollTop: 0 }); }) } goTop(); </script> </html> 以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。
新聞熱點(diǎn)
疑難解答
圖片精選
