jQuery實現頁面回到頂部功能
阿新 • • 發佈：2019-01-02
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>回到頂部</title> <style type="text/css"> body { height: 8000px; } h1{ color: #000; } img{ position: fixed; bottom: 50px; right: 50px; width: 150px; height: 195px; display: none; z-index: 100; } </style> </head> <body> <!--返回頂部小火箭 --> <img src="img/gotop.gif" /> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $(window).scroll(function(){//scroll 頁面滾動事件 var sTop=$(window).scrollTop();//scrollTop 滾動距離 if (sTop>=500) { /* * 都可以實現顯示的作用 * $("img").show(); $("img").css("display","block")*/ $("img").fadeIn(); } else{ /* 都可以實現隱藏的作用 * * $("img").hide() $("img").css("display","none")*/ $("img").fadeOut() } }) $("img").click(function(){ $("body,html").animate({scrollTop:0},500) }) }) </script> </body> </html>