最近刚好有点闲时间就开始学jQuery了,以前用原生avaScript写过返回顶部的功能,但是很费代码,而且目前正在写的主题用的是边学边卖的jQuery,所以到了要实现返回顶部的功能的时候就用我仅学的一点JQuery写了个非常简单的返回顶部功能;虽然不够强大,但是已经够用了;

下面放代码

html部分

<!-- 返回顶部的按钮 -->
<a class="top" href="javascript:;">TOP</a>
<!-- 纯属是为了撑开页面高度的一个默默奉献的div -->
<div class="page-hight"></div>
<!-- 需要引入JQuery.js -->

css部分

.top{
position:fixed;
bottom:30px;
right:30px;
display:none;
background:#ccc;
font-size:15px;
padding: 10px;
border-radius:180px;
text-decoration:none;
}
.page-hight{
height:1200px;
}

js部分

function backTop(){
  var GTop = $(document).scrollTop();        // 获取滚动条到浏览器顶部的距离
  if (GTop > 300){        // 如果滚动条距离顶部的值大于300
    $(".top").css("display","block");        // 显示返回顶部的按钮
  }else {            // 如果滚动条距离顶部的值小于300
    $(".top").css("display","none");        // 隐藏返回顶部的按钮
  }
  setTimeout( backTop);        // 可以理解为循环上面的判断
};
  backTop();        // 执行上面的函数
  $(".top").click(function(){            // 当点击返回顶部的按钮的时候
    $("html,body").animate({scrollTop:0},400);        // 让滚动条以0.4秒的时间滚动到浏览器顶部
  })