JQuery返回顶部默认隐藏，下拉显示展开JS特效代码

《JQuery返回顶部默认隐藏，下拉显示展开JS特效代码》正文开始，本次阅读大概10分钟。

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

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

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

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

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

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

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

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

scripttype=text/javascriptsrc=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(){
$(body,html).animate({
scrollTop:0
},
1000);
returnfalse;
});
});
});
/script

完整的测试代码：

!DOCTYPEhtml
html
head
title基于jquery的返回顶部效果/title
scripttype=text/javascriptsrc=http://img.jb51.net/jslib/jquery/jquery.min.js/script
styletype=text/css
#goTop{position:absolute;display:none;width:50px;height:48px;background:#fffurl(http://files.jb51.net/file_images/article/201601/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=goTopclass=goTop/div
scripttype=text/javascript
$(window).scroll(function(){
varsc=$(window).scrollTop();
varrwidth=$(window).width()+$(document).scrollLeft();
varrheight=$(window).height()+$(document).scrollTop();
if(sc0){
$(#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);
});
/script
/body
/html