打赏银两×

博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。

支付宝支付

微信支付

QQ钱包

支付二维码

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

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

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

完整代码如下：

```
<!DOCTYPE html>
```
```
<html>
```
```
	<head>
```
```
		<title>返回顶部</title>
```
```
		<meta charset="utf-8" />
```

		<script type="text/javascript" src="jquery-1.8.2.js"></script>

```
		<style type="text/css">
```
```
			body{
```
```
				height:2000px;
```
```
			}
```
```
			#scrollTop{
```
```
				position:fixed;
```
```
				width:48px;
```
```
				height:48px;
```
```
				bottom:100px;
```
```
				right:100px;
```
```
				text-align:center;
```
```
				background:url("images/5.png");				
```
```
				color:#FFF;
```
```
				font-size:12px;
```
```
				cursor:pointer;
```
```
				display:none;
```
```
			}
```
```
			#scrollTop:hover{
```
```
				background-position:-48px 0px;
```
```
			}
```
```
		</style>
```
```
	</head>
```
```
	<body>
```
```
		<div id="scrollTop"></div>	
```
```
		<script type="text/javascript">			
```
```
			$(window).scroll(function(){							
```
```
				if($(window).scrollTop()<=100){
```
```
					$("#scrollTop").fadeOut(1000);	
```
```
				}else{
```
```
					$("#scrollTop").fadeIn(1000);
```
```
				}
```
```
			})
```
```
			$("#scrollTop").click(function(){
```

				 $('body,html').animate({scrollTop:0},500);

```
			})
```
```
		</script>
```
```
	</body>
```
```
</html>
```

演示地址：

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

源代码下载地址：

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

版权归马富天博客所有

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

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

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

顶2

踩0

上一篇《如何让背景图片铺满屏幕》下一篇《搜索引擎爬虫蜘蛛的USERAGENT大全》

评论审核未开启

回复后邮件通知我

随机阅读换一批

TOP10

浏览最多
评论最多

1. Eclipse中...No java virtual machine was found...解决方法（4996）

2. JavaScript中alert()方法重写（3135）

3. 数据库SQL语句查询指定时间段内的数据（2180）

4. input输入框绑定回车事件两种方式（2065）

5. jQuery中效果animate方法解决width是百分比出现的问题（1189）

6. 【宅男福利】如何通过番号看电影（776）

7. Thinkphp框架如何隐藏home模块（617）

8. PIE解决CSS3中border-radius在IE浏览器中的兼容性（602）

9. Jquery实现返回顶部，并且缓慢移动到顶部（582）

10. CSS修改默认的input标签中file（文件上传）样式（566）

1. PHP快速入门（14）

2. CloverFlush.dll 没有被指定在 Windows 上运行，或者它包含错误。（4）

3. JavaScript中alert()方法重写（4）

4. PHP下最好用的富文本HTML过滤器：HTMLPurifier使用教程（3）

5. 如何设置域名邮箱（3）

6. CSS outline 属性介绍（3）

7. PHP 模拟登录（3）

8. php实现pjax无刷新加载页面实例（3）

9. 【面试题】加号和连接符.的优先级比较（3）

10. 如何使用Eclipse安装SVN插件（3）