恩，不知道之前在哪看過一個頁面效果就是如果頁面被滑動了就出現一個小火箭，點擊這個小火箭就可以慢慢回到頁面頂部，閑的沒事，自己搞了一下
需要引入jquery
代碼和布局都很簡單
<!DOCTYPE HTML><html> <head> <style> #content{ height: 2000px ; width: 960px ; margin: 0 auto ; background-color: blue ; } #rocket{ width: 50px ; height: 50px ; position: fixed; right: 10px ; bottom: 10px ; display: none; } #rocket img{ width: 100%; height: 100%; } </style> <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script> </head> <body> <div id="layout"> <div id="content"></div> <div id="rocket"><img src="./img/rocket.png"></div> </div> </body> <script type="text/Javascript"> document.addEventListener("mousewheel",function(){ if(document.body.scrollTop!=0) { $("body").stop(); $('#rocket').unbind().bind('click',up); $("#rocket").CSS('display', 'block'); } },false) ; function up(){ $("body").animate({scrollTop:"0"},2000,function(){ $("#rocket").css('display', 'none'); $('#rocket').bind('click',up); }); $('#rocket').unbind("click"); } </script></html>
主要思路是這樣的，利用position：fixed將我們的小火箭固定在屏幕的右下角，先把display設置成none來隱藏小火箭，因為頁面在頂部的時候我們不需要它~
#rocket{ width: 50px ; height: 50px ; position: fixed; right: 10px ; bottom: 10px ; display: none; }
好的，然后我們來監聽鼠標的滾動事件（mousewheel），添加一個判斷如果頁面不在頂部就使小火箭現形，并為其添加click事件。這里注意要把body的動畫stop掉，因為如果在火箭上升的時候用戶滑動滾輪就表明用戶想停在那里，還有就是rocket的事件要先unbind在bind，不然會導致多次添加事件。
document.addEventListener("mousewheel",function(){ if(document.body.scrollTop!=0) { $("body").stop(); $('#rocket').unbind().bind('click',up); $("#rocket").css('display', 'block'); } },false) ;小火箭的點擊事件是執行一個body的scrollTop屬性的動畫，因為body的crollTop就是我們的可視區域到頁面頂部的距離。一開始執行我們就把它的click事件就unbind掉，不然點擊又會執行，造成多次執行，還有就是在動畫結束的回調函數中我們將小火箭再次隱藏并綁定點擊事件。
function up(){ $("body").animate({scrollTop:"0"},2000,function(){ $("#rocket").css('display', 'none'); $('#rocket').bind('click',up); }); $('#rocket').unbind("click"); }
大概就是這樣，很簡單吧~
新聞熱點
疑難解答
