<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ 50px; height: 50px; background: red; position: fixed; right: 0; top: 50%; line-height: 50px; text-align: center; } </style> </head> <body> <p>Top</p> <script type="text/javascript"> for(var i=0;i<5000;i++) { document.write(i+"<br/>"); } var p = document.getElementsByTagName("p")[0]; // 第一种方法 // p.onclick = function(){ // document.body.scrollTop = 0; // } // 第二种方法 // var nowScrollTop = document.body.scrollTop; // var time = setInterval(function(){ // nowScrollTop--; // if(nowScrollTop <= 0) // { // clearInterval(time); // nowScrollTop = 0; // } // document.body.scrollTop = nowScrollTop; // },1) // 第三种方法 p.onclick = function(){ var nowScroll = document.body.scrollTop; var nowScrollSpend = nowScroll/100; var time = setInterval(function(){ nowScroll -= nowScrollSpend; if(nowScroll <=0) { clearInterval(time); nowScroll = 0; } document.body.scrollTop = nowScroll; },1) } </script> </body> </html>