Button - Display
The button element is placed under the footer. Its position is fixed in the lower right-hand corner of the view.
app/views/layouts/application.html.erb
<!-- footer element above -->
<div class="scroll-top visible-xs visible-sm">
    <a class="btn btn-primary page-scroll" href="#">
        <i class="fa fa-chevron-up"></i>
    </a>
</div>
app/assets/stylesheets/application.scss
.scroll-top .btn {
    z-index: 1049;
    position: fixed;
    right: 2%;
    bottom: 2%;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    font-size: 20px;
    background-color: #5a59a3 !important;
    border:1px solid #5a59a3 !important;
}
 
JQuery - smooth scroll
Two functions are used in conjunction with the scroll button. First, an event handler to fade the scroll to top button is bound to the JavaScript scroll event. The function is executed each time the event is triggered on the window object. Upon landing on the page, the page-scroll button is visible. After a user starts scrolling the page, the fade conditional is triggered. page-scroll is faded out until the scrollTop property returns a value of greater than 100px (the user has scrolled more than 100px). At greater than 100px scroll, page-scroll is faded in. It is faded out again after the user has returned to the top of the page.
The second function returns the user to the top of the page, by triggering a click event handler on the page-scroll button. The click event uses the JQuery animate method to gradually change the state of the body element. The speed paramter is set to 800. The scrollTop property is used with a value of 0 to return the user to the top of the page without a vertical scrollbar.
app/views/layouts/application.html.erb
$(document).ready(function(){
    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.page-scroll').fadeIn();
        } else {
            $('.page-scroll').fadeOut();
        }
    });
    
    // jQuery for page scrolling feature
    $('.page-scroll').click(function() {
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
});
 
JQuery - Easing
Several easing options were tried with animate, including linear. The JQuery easing plugin for Rails was also installed, but animate with a slow speed and the default swing function seemed sufficient for achieving the desired effect.