回到顶端

这里回到顶端的实现很简单。用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>

posted @ 2015-10-07 14:44 Flyings 阅读(219) 评论(0) 收藏举报

刷新页面返回顶部