您的位置：首页 > Web前端 > JQuery

jquery返回顶部

2016-03-15 15:50 483 查看

像这种常用的效果必须掌握是不是？？？

什么太复杂的写不出来，这种简单的还不是必须get？

返回顶部按钮首先是隐藏的状态，随着鼠标滚动，比如我这里设置的是滚动到距页面顶部200px的地方，然后按钮fadeIn(),否则fadeOut()消失，

按钮点击的时候以动画的形式滚动回去，$('body,html').animate({scrollTop:0},500)

下面把代码put出来：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://files.cnblogs.com/files/chentongtong/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>200){
$(".back-top").fadeIn(500);
}else{
$(".back-top").fadeOut(500);
}
});
$(".back-top").click(function(){
$('body,html').animate({
scrollTop:0
},300);
return false;
});
})

</script>
<style type="text/css">
*{margin:0;padding:0;}
body,a{
font-family:"Microsoft YaHei";
text-decoration: none;
color: #000;
}
.back-top{
width: 46px;
height: 46px;
line-height: 22px;
text-align: center;
position: fixed;
top: 70%;
right: 2%;
display: block;
z-index: 3;
border:1px solid #444;
cursor: pointer;
display: none;
}

</style>
</head>
<body>
<img src="http://files.cnblogs.com/files/chentongtong/Document.gif">
<a class="back-top">返回顶部</a>
</body>
</html>

还没学会怎么在博客里加可运行代码效果，所以图片、jQuery框架的链接都是把文件上传到博客之后找到的链接，把代码复制下来在本地建一个html文件粘贴上去就能看到效果，

按钮做的比较丑，凑乎看哈客官。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航