浮动操作按钮不起作用？

Question

The problem I'm having is that when am click on button it should be come to top and floated. come to top is working but it not floated..can anyone suggest me for this problem......

code like bellow

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

css like bellow

.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 code

<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

Set position of create-course-info to fixed .

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

Fiddle

Answer 2

No sure what you want to do with the float, but here is an JSFIDDLE example with your code and Position set to Fixed and an initial state of Display:none

JSFIDDLE