<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>jquery实现当页面滚动超过一屏时显示返回顶部按钮</title>
<style>
#go_top{position:fixed; LEFT: 85%;bottom:50px;}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#go_top").hide();
$(function () {
//检测屏幕高度
var height=$(window).height();
//scroll() 方法为滚动事件
$(window).scroll(function(){
if ($(window).scrollTop()>height){
$("#go_top").fadeIn(500);
}else{
$("#go_top").fadeOut(500);
}
});
$("#go_top").click(function(){
$('body,html').animate({scrollTop:0},100);
return false;
});
});
});
</script>
</head>
<body>
<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
<div >
<img src="./img/top.png"/ alt="回到顶部图片">
</div>
</body>
</html>