Skip to content

Instantly share code, notes, and snippets.

@molochnyk molochnyk/Button Top
Created Apr 29, 2017

Embed
What would you like to do?
Button Top
HTML code
<div class="top" title="Наверх">
<i class="fa fa-angle-double-up"></i>
</div>
CSS(SCSS) code
.top{
position: fixed;
bottom: 25px;
right: -100px;
background-color: #e0e0e0;
z-index: 12;
border-radius: 10em;
color: #666;
font-size: 26px;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
transition: all .3s ease;
opacity: .5;
&:hover{
color: #fff;
background-color: $accent;
opacity: 1;
}
&.active{
right: 25px;
}
}
JS(jquery) code
$(window).scroll(function() {
if($(this).scrollTop() > $(this).height()) {
$('.top').addClass('active');
} else{
$('.top').removeClass('active');
}
});
$('.top').click(function() {
$('html, body').stop().animate({scrollTop: 0}, 'slow', 'swing');
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.