Button Top

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');
  })