jQuery动态回到顶部

最新推荐文章于 2018-11-30 12:40:16 发布

包子源

最新推荐文章于 2018-11-30 12:40:16 发布

阅读量904

点赞数

分类专栏： jQuery 文章标签： jquery web前端实例 javascript

本文链接：https://blog.csdn.net/ziwoods/article/details/50281345

版权

jQuery 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

jquery实现点击红色动态回到顶部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery动态回到顶部特效</title>
</head>
<body>
<style>
#goTopBtn {position: fixed;line-height:36px;width:36px;bottom:35px;height:36px;cursor:pointer;display:none;
background-color:red;}
</style>
<br/>
<p style="text-align:center;font-family:Georgia, 'Times New Roman', Times, serif;font-size:24px;font-weight:bold;">***，how are you。
<br/>Just do what you want do!!!</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="goTopBtn"></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
  $(window).scroll(function(){
		   var sc=$(window).scrollTop();
		   var rwidth=$(window).width()
      	  if(sc>0){
				$("#goTopBtn").css("display","block");
				$("#goTopBtn").css("left",(rwidth-36)+"px")
				}else{
			$("#goTopBtn").css("display","none");
				}
		  })
		  	
	  $("#goTopBtn").click(function(){
		  var sc=$(window).scrollTop();
		 $('body,html').animate({scrollTop:0},500);
		  })		
			
</script>
</body>
</html>