<!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>jquery實現當頁面滾動超過一屏時顯示返回頂部按鈕</title> <style> #go_top{position:fixed; LEFT: 85%;bottom:50px;} </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("#go_top").hide(); $(function () { //檢測屏幕高度 var height=$(window).height(); //scroll() 方法為滾動事件 $(window).scroll(function(){ if ($(window).scrollTop()>height){ $("#go_top").fadeIn(500); }else{ $("#go_top").fadeOut(500); } }); $("#go_top").click(function(){ $('body,html').animate({scrollTop:0},100); return false; }); }); }); </script> </head> <body> <br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/> <br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/> <div id="go_top"> <img src="./img/top.png"/ alt="回到頂部圖片"> </div> </body> </html>