這篇文章主要為大家詳細 介紹了JS實現帶動畫的回到頂部效果,具有一定的參考價值,有興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現帶動畫的回到頂部效果的具體程式碼,供大家參考,具體內容如下
實作功能:捲動到頁面某一個高度的時候,回到頂部按鈕出現。點擊之後回到網頁頂部,按鈕隱藏。
程式碼如下,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 /> <p id="goTop" class="gotop"> <p>回到</p> <p>顶部</p> </p> </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>
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
#以上是在JS中如何實現回到頂部效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!