您的位置：首页 > 其它

回到顶端

2015-10-07 14:44 309 查看

这里回到顶端的实现很简单。用window对象的scroll()方法，然后用window对象的scrollTop()判断滚动多少距离后出现图标。用animated()方法设置｛scrollTop:0｝实现回到顶端。代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>回到顶端</title>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js" type="text/javascript" ></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<style>
body{
background: rgba(0, 0, 0,.5);
width: 100%;
height:1200px;
}
.backtop{
//设置fixed定位图标
position: fixed;
float: right;
right: 100px;
bottom: 100px;
}
</style>
<script>
$(function(){
var backtop = $('.backtop')
$(backtop).hide();
$(window).scroll(function(){
//滚动大于100后出现图标
if($(window).scrollTop()>100){
$(backtop).fadeIn();
}else{
$(backtop).fadeOut();
}
});
$(backtop).click(function(){
//回到顶端
$('body').animate({scrollTop:0},500);
});
});
</script>
</head>
<body>
<div class="backtop">
<span class="glyphicon glyphicon-circle-arrow-up" style="color: rgb(255, 107, 147);font-size:50px;"></span>
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航