Simple jQuery scroll-to-top button.
<a href="#" class="scroll-to-top scroll-to-top--hidden">Top</a>
.scroll-to-top {
position: fixed;
z-index: 10;
bottom: 2em;
right: 2em;
display: inline-block;
padding: 1em;
text-decoration: none;
background: #eee;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
.scroll-to-top--hidden {
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
transform: translateY(200%);
}
#
# ScrollToTop
#
class ScrollToTop
constructor: () ->
@window = jQuery window
@document = jQuery "body"
@btn = jQuery ".scroll-to-top"
@btn_hidden_class = "scroll-to-top--hidden"
@distance = 100
@speed = 400
@window.scroll @scroll_check
@btn.on "click", @scroll_click
scroll_check : (e) =>
if jQuery(window).scrollTop() > @distance
@btn.removeClass @btn_hidden_class
console.log "class removed"
else
@btn.addClass @btn_hidden_class
console.log "class added"
scroll_click : (e) =>
@document.animate { scrollTop: 0 }, @speed
new ScrollToTop