JS（JQ）實現帶動畫的回到頂部效果
阿新 • • 發佈：2019-01-07
實現功能：滾動到頁面某一個高度的時候，回到頂部按鈕出現。點選之後回到網頁頂部，按鈕隱藏。
程式碼如下，jQuery引用的是百度CDN的，因此整段程式碼複製下來後在瀏覽器執行即可。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>實現回到頂部功能</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) { //滾動高度可調 $("#goTop").show(); } else { $("#goTop").hide(); }; }) $("#goTop").on("click", function() { $("body").stop().animate({ scrollTop: 0 }); }) } goTop(); </script> </html>