浮动操作按钮不起作用?

时间:2016-06-30 06:56:40

标签: jquery html css css-float

我遇到的问题是,当我点击按钮时,它应该是顶部并浮动。到顶部是工作但它没有浮动..任何人都建议我这个问题......

像plow一样的代码

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

喜欢吼叫

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

2 个答案:

答案 0 :(得分:0)

create-course-info的位置设为fixed

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

Fiddle

答案 1 :(得分:0)

不确定您要对浮点数做什么,但这是一个JSFIDDLE示例,其代码和Position设置为Fixed,初始状态为Display:none

JSFIDDLE

相关问题