之前发布过几篇关于返回顶部的JS特效了：

  1、jQuery：即插即用 返回顶部

  2、案例：jQuery 返回顶部（返回顶部、微信、评论、反馈）【推荐】

  3、为zblogPHP等网站添加返回顶部、QQ、旺旺、二维码等在线客服功能的特效代码教程

  4、即插即用 javascript实现滚动下拉一定高度后显示返回顶部，默认不显示【推荐】

  其中2和4最为推荐使用，第二个是个人常使用的，比较懒，所以算是整合好的，而第4个推荐纯粹是即插即用的返回顶部返回顶部代码 js，而且带有本文要分享的默认隐藏下拉显示的特效，后期可自行修改，需要一定的前端基础！

  这篇文章主要介绍了也是用jQuery实现的智能隐藏、带滑动效果的返回顶部代码返回顶部代码 js，这个没有仔细研究，下次再制作zblog主题的话可以考虑使用本文的方式实现！

  JS代码：（下方有完整的测试代码）

  <pre class="prism-highlight prism-language-markup">

  $(document).ready(function() {
    //首先将#back-to-top隐藏
    $("#back-to-top").hide();
    //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
    $(function() {
      $(window).scroll(function() {
        if ($(window).scrollTop() > 100) {
          $("#back-to-top").fadeIn(1500);
        } else {
          $("#back-to-top").fadeOut(1500);
        }
      });
      //当点击跳转链接后，回到页面顶部位置
      $("#back-to-top").click(function() {
        $('body,html').animate({
          scrollTop: 0
        },
        1000);
        return false;
      });
    });
  });
</pre>

  完整的测试代码：

  <pre class="prism-highlight prism-language-markup">

基于jquery的返回顶部效果

goTop{position:absolute;display:none;width:50px;height:48px;background:#fff url(http://files.jb51.net/file_images/article/201601/gotop.png) no-repeat 16px 15px;border:solid 1px #f9f9f8;border-radius:6px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);cursor:pointer}

goTop:hover{height:50px;background-position:16px 16px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.3)}

想看到效果就需要拖动滚动条到下面，靠右下角的位置就可以看到

    $(window).scroll(function(){
        var sc=$(window).scrollTop();
        var rwidth=$(window).width()+$(document).scrollLeft();
        var rheight=$(window).height()+$(document).scrollTop();
        if(sc>0){
            $("#goTop").css("display","block");
            $("#goTop").css("left",(rwidth-80)+"px");
            $("#goTop").css("top",(rheight-120)+"px");
        }else{
            $("#goTop").css("display","none");
        }
    });
    $("#goTop").click(function(){
        $('body,html').animate({scrollTop:0},300);
    });

</pre>