jquery实现当页面滚动超过一屏时显示返回顶部按钮

最新推荐文章于 2022-07-05 19:37:52 发布

木偶跳舞

最新推荐文章于 2022-07-05 19:37:52 发布

阅读量7.6k

点赞数 3

分类专栏： jQuery

本文链接：https://blog.csdn.net/u013372487/article/details/49785013

版权

jQuery 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!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>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
<div id="go_top">
	<img src="./img/top.png"/ alt="回到顶部图片">
</div>
</body>
</html>