Jquery实现返回顶部,并且缓慢移动到顶部

学习笔记 马富天 2016-03-29 15:33:08 1090 1

【摘要】Jquery实现返回顶部完整代码

完整代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<title>返回顶部</title>
  5. 		<meta charset="utf-8" />
  6. 		<script type="text/javascript" src="jquery-1.8.2.js"></script>
  7. 		<style type="text/css">
  8. 			body{
  9. 				height:2000px;
  10. 			}
  11. 			#scrollTop{
  12. 				position:fixed;
  13. 				width:48px;
  14. 				height:48px;
  15. 				bottom:100px;
  16. 				right:100px;
  17. 				text-align:center;
  18. 				background:url("images/5.png");				
  19. 				color:#FFF;
  20. 				font-size:12px;
  21. 				cursor:pointer;
  22. 				display:none;
  23. 			}
  24. 			#scrollTop:hover{
  25. 				background-position:-48px 0px;
  26. 			}
  27. 		</style>
  28. 	</head>
  29. 	<body>
  30. 		<div id="scrollTop"></div>	
  31. 		<script type="text/javascript">			
  32. 			$(window).scroll(function(){							
  33. 				if($(window).scrollTop()<=100){
  34. 					$("#scrollTop").fadeOut(1000);	
  35. 				}else{
  36. 					$("#scrollTop").fadeIn(1000);
  37. 				}
  38. 			})
  39. 			$("#scrollTop").click(function(){
  40. 				 $('body,html').animate({scrollTop:0},500);
  41. 			})
  42. 		</script>
  43. 	</body>
  44. </html>

演示地址:

http://mafutian.net/home/demo/index/id/22.html

源代码下载地址:

http://mafutian.net/public/home/download/demo/22.zip

版权归 马富天PHP博客 所有

本文标题:《Jquery实现返回顶部,并且缓慢移动到顶部》

本文链接地址:http://www.mafutian.net/22.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

3

0

上一篇《 被 md5() 算法加密的字符串所支持的最大长度 》 下一篇《 搜索引擎爬虫蜘蛛的USERAGENT大全 》
分享到:

所有评论

  1. 首页
  2. 上一页
  3. 1
  4. 下一页
  5. 尾页
  6. 第1页
  7. 每页12条
  8. 共1页
  9. 共1条
评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码