Scroll to top button example

application.html.haml

// app/views/layouts/application.html.haml
%div.scroll-to-top
  Scroll to Top

application.js

// app/assets/javascripts/application.js
$(document).on('turbolinks:load', function() { // OR inside document.ready
  // Show/hide scroll to top button
  $(document).on('scroll', function(){
    if ($(window).scrollTop() > 100) {
      $('.scroll-to-top').addClass('show');
    } else {
      $('.scroll-to-top').removeClass('show');
    }
  });
  // Scroll to top on click
  function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
  }
  $('.scroll-to-top').on('click', scrollToTop);
});

application.scss

// app/assets/stylesheets/application.scss
.scroll-to-top {
  border-radius: 22px;
  position: fixed;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  text-align: center;
  z-index: 99999;
  background-color: #777777;
  color: #eeeeee;
  right: 30px;
  bottom: 30px;
  padding: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  &.show {
    visibility:visible;
    cursor:pointer;
    opacity: 1.0;
  }
}

reference_links

http://www.webtipblog.com/adding-scroll-top-button-website/
https://getflywheel.com/layout/add-sticky-back-top-button-website/

Scroll to top button

Scroll to top button example