用javascript制作返回顶部按钮

以前一直想实现的返回顶部按钮现在终于算是实现了，其实还是用到了JS里的setTimeout()方法，另一篇关于setTimeout()方法的介绍的文章可以点击这里：

https://blog.yeskn.com/archives/536.html

我的这个返回顶部的按钮做的比较简单，因为需要符合网站一致的风格，所以只添加了“返回顶部”这四个字当做按钮，并且我看到似乎豆瓣也是这样么做的。你可以在我的首页的右下角看到他，或许你已经发现了吧。

这个效果是模仿极客公园的效果做的，原始的效果可以点http://geekpark.net 查看。

主要的效果是点击返回顶部按钮的时候，出现一个小火箭，然后网页动态的返回顶部，当到达顶部的时候，小火箭就往上飞，直到消失。

点击此处查看DEMO:https://blog.yeskn.com/uploads/back-to-up.html

我写的代码如下：

<script>
var ptt=0;
function pageScroll() {
document.getElementById('flypig').style.display='block';
window.scrollBy(0,-10); //每次上升10px
scrolldelay = setTimeout('pageScroll()',2); //2毫秒重复执行一次
if(document.body.scrollTop==0) {
  document.getElementById('flypig').style.marginBottom=ptt;
  ptt=ptt+10;
}//火箭向上飞的效果

if(ptt>=1000){
  ptt=0;
  document.getElementById('flypig').style.marginBottom=20;
  document.getElementById('flypig').style.display='none';
  clearTimeout(scrolldelay);
}//返回原始状态
//pageScroll ends
}

</script>

html部分代码：

<div style="display:none;float:left;position:fixed;
    bottom:20;margin-left:75%;cursor:pointer;" 
    id="flypig">
    <img src="<?php bloginfo('template_directory'); ?>/images/flypig.gif" /> 
</div>

<div style="float:left;position:fixed;
    bottom:10;margin-left:75%;cursor:pointer;" 
    id="go" onclick="pageScroll()">返回顶部
</div>

详解：首先想看到效果的话请滚动窗口滚动条向下一定的距离，然胡，点击‘返回顶部’这个div,然后id为flypig的div的display属性从none变为block,即就将小火箭显示出来，然后开始10px的速度返回顶部，当小火箭与底部的距离(ppt)大于1000px的时候，就停止setTimeout，并将ppt置零，然后再将小火箭向下的距离设为20（这是我自己定的距离，）,然后再次隐藏它，使一切回到初始状态。