Jquery 返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
height: 2000px;
}
.gotop{
display: block;
width: 32px;
height: 32px;
background-color: red;
text-align: center;
text-decoration: none;
font-size: 14px;
font-weight: bold;
color: white;
line-height: 32px;
position: fixed;
right:50px;
bottom:50px;
opacity: 0;
/*top: 500px;*/
}
</style>
</head>
<body>
<div class="wrap">
<a href="###" class="gotop">TOP</a>
</div>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 当滚动条滚动大于200时出现,未大于,消失
$(window).scroll(function(){
if($(document).scrollTop()<200){
// alert("kk");
$(".gotop").stop().animate({
opacity: 0
},1000)
}
else{
$(".gotop").show().stop().animate({
opacity: 1
},1000)
}
})
// 返回顶部
$(".gotop").on("click",function(){
$("html body").animate({
scrollTop:0
},1000)
})
})
</script>
</body>
</html>
最新文章
- PHPUnit笔记
- 常用的WebForm 控件
- msql数据迁移,myisam及innoDB
- [转]NPOI导出EXCEL 打印设置分页及打印标题
- 深入理解Java虚拟机之读书笔记一 自动内存管理机制
- android studio出现Error:compileSdkVersion android-x requires compiling with JDK 7问题
- surface RT app安装心得
- 一个比较全面的DJANGO_REST_FRAMEWORK的CASE
- R语言学习笔记:查看函数的R源代码
- Mysql MEMORY 引擎
- 阿里云CentOS 7.1使用yum安装MySql5.6.24
- 使用Visual Studio将Objective-C编译C++
- 改变Edit的光标(使用CreateCaret,ShowCaret和LoadBitmap三个API函数)
- [置顶] “河软CSDN2011级表彰暨实习动员大会”顺利召开!
- asm添加删除磁盘
- nmon进行性能分析
- Makefile自动生成:cmake
- Codeforces Round #308 (Div. 2)
- python 正则表达式中反斜杠(\)的麻烦和陷阱
- excel追加数据