Having an issue where clicking on a button should bring it to the top and float. The button is coming to the top but not floating. Any suggestions on how to solve this problem?
Here is the code:
<div class="create-course-info" id="scroll">
<a href="#" ><span class="count"><i class="fa fa-angle-up"></i></span>
</a>
</div>
And the 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";
}
As well as the 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>