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

当前位置：网站建设 > 技术支持

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

资料来源：网络整理时间：2023/3/4 1:04:06 共计：3618 浏览

之前发布过几篇关于返回顶部的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(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>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：即插即用 js隐藏与显示回到顶部（返回顶部）按钮_js/jQuery | ·下一条：jquery判断浏览器宽度小于指定值改变div的CSS样式_js/jQuery