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

jquery返回顶部

2015-11-16 19:28 585 查看

**jquery返回顶部**

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<style type="text/css">
#content{width: 500px;margin: 30px auto;height: 3000px;}
#content a{float: right;right: 10px;bottom: 100px;position: fixed;background: url(backTop.png) no-repeat;width: 60px;height: 60px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#returnBack").hide();
$(window).scroll(function(){
if($(window).scrollTop()>100){
$("#returnBack").fadeIn(800);
}else{
$("#returnBack").fadeOut(800);
}
})
$("#returnBack").click(function() {
$(document.body).animate({scrollTop: 100}, 800);
return false;
});
})

</script>
</head>
<body>
<div id="content">
<a href="javascript:;" id="returnBack" alt="返回顶部"></a>
</div>
</body>
</html>

修复ie、火狐兼容问题

将

(document.body).animate(scrollTop:100,800);改为：(document.body).animate({scrollTop: 100}, 800);
改为：
(‘body,html’).animate({scrollTop: 100}, 800);

如果在下载源码的过程中遇到这个bug，希望看到这个日志后能自动去修改源码中的bug

效果图：

源码下载地址：http://pan.baidu.com/s/1eQfQPfs

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

标签：

相关文章推荐

新的分享

章节导航