.button{
opacity: 0;
position: fixed;
color: white;
font-size: 70px;
visibility: hidden;
text-align: center;
transition: all 0.5s;
background: #343434;
border-radius: 70px;
display: inline-block;
right: 50px; bottom: 30px;
width: 70px; height: 70px;
}
.visible{
visibility: visible;
opacity: 1;
}
<a href="#toTop" class="button">↑</a>
(function($scrollButton, $win){
$(document).scroll(function(){
$scrollButton.toggleClass("visible", $win.scrollTop() > 300);
});
$scrollButton.click(function(e){
e.preventDefault();
$("body, html").animate({scrollTop : 0}, 500);
});
})( $(".button"), $(window) );
jsfiddle.net/In4in/fLfL6n4j