在遇到内容特别长的页面时，通过添加回到顶端按钮，可以大大提高用户体验，下面就来介绍一种使用jQuery快速实现该功能的方法：

首先需在页面的body标签下添加一个a标签，用于充当回到顶端的按钮：

<a href="javascript:void(0);" class="scrollup">顶端</a>

接着为这个按钮添加CSS渲染样式，让其始终置于页面的右下角，具体的代码如下：

.scrollup {
  width: 40px;
  height: 40px;
  opacity: 0.3;
  position: fixed;
  bottom: 50px;
  right: 100px;
  display: none;
  text-indent: -9999px;
  background: url('icon_top.png') no-repeat;
}

你可以使用任意样式的图片来代替icon_top.png，同时可以根据网页的布局来修改该按钮的样式，注意：这里的scrollup元素由于设置了display:none，默认是不会显示的。

在添加好这个元素后，最后一步就是添加Javascript代码了，其作用是只有当页面滚动条滑到一定刻度时才会显示回到顶端按钮，并且点击后页面能回到页首，具体的代码如下：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
  $(document).ready(function () {
      $(window).scroll(function () {
          if ($(this).scrollTop() > 100) {
              $('.scrollup').fadeIn();
          } else {
              $('.scrollup').fadeOut();
          }
      });
      $('.scrollup').click(function () {
          $("html, body").animate({
              scrollTop: 0
          }, 600);
          return false;
      });
  });
</script>

上面的代码说明，当滚动条滑到刻度大于100时淡入显示回到顶端按钮，小于100淡出隐藏按钮，点击scrollup元素按钮，使用动画回到页首。

可以看到实现回到顶端功能真的很简单，使用的都是jQuery默认的特效，是不是很巧妙？

参考：http://answers.squarespace.com/questions/6003/how-can-i-add-a-scroll-to-top-button