Adding a sticky 'scroll back to top' button to your website

ed on 11 Aug 2015

This resource is suitable for website with lots of page content. When a user scrolls past a certain point on the website, this helpful button appears, enabling users to easily return to the top of a page.

Creating the structure

Insert the .elevator-wrapper at the bottom of your content, before the closing tag.

<body>
  <!-- all your content here -->

  <div class="elevator-wrapper"></div>

  <!-- link to scripts here -->
</body>

Note: To enable elevator button on your page you should have jQuery and Font Awesome library installed.

Adding style

Add the following style for the elevator button or you can further change according to your needs.

/**
 * Elevator - Scroll back to top utility CSS
 */
.elevator {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: inline-block;
  width: 48px;
  height: 48px;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  visibility: hidden;
  background: rgba(0, 0, 0, .7);
  background-image: none;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .05);
          box-shadow: 0 0 10px rgba(0, 0, 0, .05);
  opacity: 0;
  -webkit-transition: all .3s ease;
       -o-transition: all .3s ease;
          transition: all .3s ease;
}
.elevator.elevator-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
  z-index: 999;
}
.elevator .fa {
  position: relative;
  top: 12.5px;
  left: 14.5px;
  padding: 0;
  margin: 0;
  font-size: 20px;
  color: white;
  -webkit-transition: all .3s ease;
       -o-transition: all .3s ease;
          transition: all .3s ease;
}
.elevator:hover {
  background: rgba(0, 0, 0, .8);
}
.elevator:hover .fa {
  top: 5px;
  color: white;
}
@media (max-width: 768px) {
  .elevator {
    /* only show elevator on desktop screen */
    display: none !important;
  }
}

Events handling

Then add the following jQuery snippet on your script file. This script helps to add or remove CSS classes and also helps to smooth scrolling back to the top of the page.

(function ($) {
  'use strict';

  // Elevator - Scroll back to top utility JS
  // ========================================

  // append necessary class
  // should have already contain wrapper on a page.
  // <div class="elevator-wrapper"></div>
  $('.elevator-wrapper').append('<div class="elevator"><i class="fa fa-chevron-up" aria-hidden="true"></i></div>');

  // browser window scroll (in pixels) after which the "back to top" link is shown
  var offset = 300,
    // duration of the top scrolling animation (in ms)
    scroll_top_duration = 700,
    // grab the "back to top" link
    $back_to_top = $('.elevator');

  // hide or show the "back to top" link
  $(window).scroll(function () {
    ($(this).scrollTop() > offset) ? $back_to_top.addClass('elevator-is-visible') : $back_to_top.removeClass('elevator-is-visible');
  });

  // smooth scroll to top
  $back_to_top.on('click', function (event) {
    event.preventDefault();
    $('body,html').animate({
      scrollTop: 0
      }, scroll_top_duration
    );
  });

})(jQuery);

Demo

Here’s a nice demo on CodePen:

See the Pen Elevator - Scroll back to top utility by Milan Aryal (@MilanAryal) on CodePen.

View on full mode

Following are the code snippets link of this article:

Jiang Wu Data Engineer @ Adyen (NL)

Adding a sticky 'scroll back to top' button to your website

Creating the structure

Adding style

Events handling

Demo