Skip to content

Instantly share code, notes, and snippets.

@artemsheludko
Last active July 9, 2018 08:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save artemsheludko/3926c1923dec96bb93b0c6baf1200eac to your computer and use it in GitHub Desktop.
Save artemsheludko/3926c1923dec96bb93b0c6baf1200eac to your computer and use it in GitHub Desktop.
<!-- HTML -->
<div class="c-top" title="Top" data-icon="ei-chevron-up" data-size="s"></div>
<!-- SCSS -->
.c-top {
position: fixed;
bottom: 25px;
right: -100px;
z-index: 10;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #E0E0E0;
color: $gray;
cursor: pointer;
transition: all .25s ease;
opacity: .5;
&.is-active {
right: 30px;
}
&:hover {
opacity: 1;
}
}
<!-- JS -->
$('.c-top').click(function () {
$('html, body').stop().animate({ scrollTop: 0 }, 'slow', 'swing');
});
$(window).scroll(function () {
if ($(this).scrollTop() > $(window).height()) {
$('.c-top').addClass("is-active");
} else {
$('.c-top').removeClass("is-active");
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment