点击图片返回页面顶部的案例

<a class="rocket"></a>

* {
  margin: 0;
  padding: 0;
}
body {
  height: 4000px;
}
.rocket {
  margin: 0px;
  padding: 0px;
  width: 150px;
    height: 195px;
  display: block;
  background: url(img/rocket.png) no-repeat center center;
  position: fixed;
  right: 50px;
  bottom: 50px;
  display: none;
  z-index: 1000;
}

$(document).ready(function() {
        // 当页面卷曲超过1000px的时候，显示小火箭
        $(window).scroll(function() {
          if ($(this).scrollTop() > 1000) {
            $(".rocket").stop().fadeIn();
          } else {
            $(".rocket").stop().fadeOut();
          }
        });
        // 当小火箭被点击的时候，要返航
        $(".rocket").on("click", function() {
          $("html,body").stop().animate({
            scrollTop: '0'
          }, 2000);
        });
      });