bloqhead
3/7/2017 - 4:08 PM

Simple jQuery scroll-to-top button.

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