小火箭

最近看到博客园很多有个性的博客，觉得特别好。闲暇的时候也就来捣鼓一下，给自己的博客加了个返回顶部的小火箭。

浏览文章的时候就不用手动去拉滚动条了，很nice,有木有？

现在就讲这个制作过程，首先写一段代码

<div class="totop" style=" 100px; height: 100px; padding: 5px; position: fixed; right: 50px; bottom: 50px;">
    <a style="text-decoration: none;  100%; height: 100%; display: block;" href="#">
      <em class="icon" style=" 100px; height: 100px; display: block; background: url(http://files.cnblogs.com/files/cyppi/03.gif);"></em>
    </a>
</div>

这个小火箭的按钮是绝对定位在右侧的，图片采用的是gif,因为能上传的图片格式有限，所以采用的就是熟悉的gif了。

图片是在博客的“文件”那里上传的，然后点击图片就能看到图片的路径了。

html代码在博客的“设置”那里，拷贝粘贴到页首html代码。

最后，小火箭返回顶部就完成。如果想要设计更有个性的博客，不妨去尝试，比如背景、加载、微信二维码等等。

不积跬步，无以至千里。快去设计你的个性博客吧！~non~

文末，再贴上最简单的loading效果:

<div class="loading" id="loading" width="100%" height="100%">加载中...</div>

#loading{
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    z-index: 10000;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #999;
}    

function load(){
  setTimeout(function(){
     $('#loading').fadeOut(); 
  }, 1000)

}