jquery - float 操作按钮不起作用？

Question

我遇到的问题是，当我点击按钮时，它应该出现在顶部并 float 。达到顶峰正在工作但它没有 float ..任何人都可以建议我解决这个问题......

代码如下

<div class="create-course-info" id="scroll">
<a href="#" ><span class="count"><i class="fa fa-angle-up"></i></span>                                      
</a>
</div> 

css 如下所示

.create-course-info {
    position: relative;
    min-height: 50px;
    margin-bottom: 30px;
    padding: 10px;
}
.create-course-info .count {
    display: inline-block;
    width: 50px;
    height: 50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    line-height: 44px;
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    float: right;
    border: 3px solid #37abf2;
    background-color: #eee;
    color: #666;
}
.fa-angle-up:before {
    content: "\f106";
}

脚本代码

<script type='text/javascript'>
    $(document).ready(function(){ 
        $(window).scroll(function(){ 
            if ($(this).scrollTop() > 100) { 
                $('#scroll').fadeIn(); 
            } else { 
                $('#scroll').fadeOut(); 
            } 
        }); 
        $('#scroll').click(function(){ 
            $("html, body").animate({ scrollTop: 0 }, 600); 
            return false; 
        }); 
    });
</script>

Answer 1

将 create-course-info 的位置设置为 fixed。

.create-course-info {
    position: fixed;
    min-height: 50px;
    margin-bottom: 30px;
    padding: 10px;
}

Fiddle