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

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

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

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

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

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

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

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

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

script type="text/javascript" src="js/jquery-1.7.2.min.js">
    /script>
    script type="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);
            return false;
      }
    );
    }
    );
  }
    );
    /script>
    

完整的测试代码：

!DOCTYPE html>
    html>
    head>
    title>
    基于jquery的返回顶部效果/title>
    script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.min.js">
    /script>
    style type="text/css">
#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)}
    /style>
    /head>
    body>
    div style="height:2000px;
     text-align:center;
     padding-top:300px">
    想看到效果就需要拖动滚动条到下面，靠右下角的位置就可以看到/div>
    div id="goTop" class="goTop">
    /div>
    script type="text/javascript">
    $(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);
    }
    );
    /script>
    /body>
    /html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！