1、jQuery：即插即用 返回顶部
2、案例：jQuery 返回顶部（返回顶部、微信、评论、反馈）【推荐】
3、为zblogPHP等网站添加返回顶部、QQ、旺旺、二维码等在线客服功能的特效代码教程
4、即插即用 javascript实现滚动下拉一定高度后显示返回顶部，默认不显示【推荐】
其中2和4最为推荐使用，第二个是个人常使用的，比较懒，所以算是整合好的，而第4个推荐纯粹是即插即用的返回顶部，而且带有本文要分享的默认隐藏下拉显示的特效，后期可自行修改，需要一定的前端基础！
这篇文章主要介绍了也是用jQuery实现的智能隐藏、带滑动效果的返回顶部代码，这个没有仔细研究，下次再制作zblog主题的话可以考虑使用本文的方式实现！
JS代码：（下方有完整的测试代码）
<scripttype="text/javascript"src="js/jquery-1.7.2.min.js"></script><scripttype="text/javascript">$(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(){$(ody,html).animate({scrollTop:0},1000);returnfalse;});});});</script>
完整的测试代码：
<!DOCTYPEhtml><html><head><title>基于jquery的返回顶部效果</title><scripttype="text/javascript"src="/jslib/jquery/jquery.min.js"></script><styletype="text/css">#goTop{position:absolute;display:none;width:50px;height:48px;background:#fffurl(/file_images/article/01/gotop.png)no-repeat16px15px;border:solid1px#f9f9f8;border-radius:6px;box-shadow:01px1pxrgba(0,0,0,0.2);cursor:pointer}#goTop:hover{height:50px;background-position:16px16px;box-shadow:01px1pxrgba(0,0,0,0.3)}</style></head><body><divstyle="height:2000px;text-align:center;padding-top:300px">想看到效果就需要拖动滚动条到下面，靠右下角的位置就可以看到</div><divid="goTop"class="goTop"></div><scripttype="text/javascript">$(window).scroll(function(){varsc=$(window).scrollTop();varrwidth=$(window).width()+$(document).scrollLeft();varrheight=$(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(){$(ody,html).animate({scrollTop:0},300);});</script></body></html>
