最近刚好有点闲时间就开始学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秒的时间滚动到浏览器顶部
  })