back-to-top

Hello, how do I get the button back to the top appears after the page gets rolling. He is appearing on the screen all the time, and wanted only when the screen lowered bottom direction. Unable to compile the code for less, and started doing only with css, my code follows:

.back-to-top {
background:#b4afaf;
bottom: 45px;
height: 40px;
margin: 0;
position: fixed;
right: 10px;
width: 40px;
z-index: 1000;
.opacity(0);
.transition(opacity 350ms);
border-radius:25px;
}
.back-to-top.reveal {
.opacity(30);
cursor: pointer;
}
.back-to-top:hover {
background-color: #908e8e;
cursorointer;
}
.back-to-top.active {
display: block;
}
.fa-angle-up{
color: #fff;
font-size: 30px;
line-height: 1em;
left: 35%;
margin-top: -17px;
margin-left: -3px;
position: absolute;
top: 50%;
bottom:30px;
}