Skip Navigation

Scroll to Top

The scroll-to-top button allows the user to quickly return to the top of a page.

Available in React

Default Component


When to Use

  • Use on search results screens in conjunction with View More and Pagination when the result set exceeds the vertical space of the screen.
  • Use in any context in which the page content goes well beyond the vertical space of the screen and the user is likely to want to return to the top.

When Not to Use

  • Do not use on screens with minimal vertical scrolling, For example: landing pages or dashboards.
  • Not recommended for use on form screens in which the user is more likely to use a primary call-to-action button to navigate to the next screen.

Usage & Appearance

The scroll-to-top button is slightly transparent in order to unobtrusively overlay page content. It always appears in the bottom right corner of the screen.

The scroll-to-top button appears once the user scrolls past a certain (configurable) threshold, typically once the results or content cover the available vertical space, and it remains anchored to the bottom right of the page. Upon clicking the button, the browser returns the user to the uppermost part of the page.

Developer Notes

The scroll-to-top button will anchor itself to the bottom right corner of its parent element. This parent needs to be relatively positioned.

Use of the scroll-to-top button requires a javascript helper. The following options may be passed when using new Spark.ScrollToTop(el, {});:

Name Type Default Description
containerEl element el.parentNode The element the scroll to top button should be positioned relative to. Defaults to the parent of the passed element.
scrollToEl element window The element to scroll to the top of. Defaults to the window, but can be any block-level element with overflow: auto or overflow: scroll.

For all available methods and full API, refer to the component code on Bitbucket.

<main id="content" style="position: relative; padding-bottom: 4rem;">
  <section class="spark-table spark-table--edit-rows col-xs-12">
    <header class="spark-table__header">
      <h4 class="spark-table__title">
       Table Title
      </h4>
    </header>
    <div class="spark-table__scroll">
      <table role="grid">
        <thead>
          <tr>
            <td class="spark-table__select-all spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select all rows</span>
              </label>
            </td>
            <th data-sort="asc" tabindex="0">
              Flight <span aria-label="Number">No.</span>
            </th>
            <th data-sort tabindex="0">
              Departs
            </th>
            <th data-sort class="spark-table__no-border" tabindex="0">
              Arrives
            </th>
            <td></td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="DL0431" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]" aria-label="Depature Location">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="ATL" name="departs[]" aria-label="Depature Location">
            </td>
            <td>
              <input type="text" value="SFO" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="CDG" name="departs[]" aria-label="Depature Location">
            </td>
            <td>
              <input type="text" value="BER" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]" aria-label="Depature Location">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="DL0431" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]" aria-label="Depature Location">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="ATL" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="SFO" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="CDG" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="BER" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="DL0431" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="ATL" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="SFO" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="CDG" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="BER" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="DL0431" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="ATL" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="SFO" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="CDG" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="BER" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="DL0431" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="ATL" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="SFO" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="CDG" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="BER" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="DL0431" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="ATL" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="SFO" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="CDG" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="BER" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spark-table__checkbox">
              <label class="spark-checkbox">
                <input type="checkbox" class="spark-checkbox__input">
                <span class="spark-checkbox__box"></span>
                <span class="spark-assistive-text">select row</span>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]" aria-label="Flight Number">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]" aria-label="Departure Location">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]" aria-label="Arrival Location">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" aria-label="Edit" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" aria-label="Delete" title="Delete"></button>
              <div class="spark-table__edit-actions">
                <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
                <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>

  <button class="spark-scroll-to-top" aria-label="Back to top">
    <i class="spark-scroll-to-top__icon"></i>
  </button>
</main>

<footer class="spark-footer">
  <div class="container">
    <a class="spark-footer__logo spark-hidden--lte-sm" title="Sabre"><i class="spark-logo spark-logo--sabre spark-logo--xs"></i></a>
    <div class="spark-footer__content">
      <div class="spark-footer__copyright">
        © 2015-16 Sabre <span class="spark-hidden--lte-md">Curabitur blandit tempus porttitor.</span>
      </div>
      <ul class="spark-footer__list">
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" href="javascript: void(0);">
            Legal Policy
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" href="javascript: void(0);">
            Contact Us
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" href="javascript: void(0);">
            Support
          </a>
        </li>
      </ul>
    </div>
    <ul class="spark-footer__list spark-footer__list--right spark-footer__list--icons">
      <li class="spark-footer__list-item">
        <a class="spark-footer__list-link" aria-label="Twitter" title="Twitter">
          <i class="spark-icon-social-twitter spark-icon--fill"></i>
        </a>
      </li>
      <li class="spark-footer__list-item">
        <a class="spark-footer__list-link" aria-label="Facebook" title="Facebook">
          <i class="spark-icon-social-facebook spark-icon--fill"></i>
        </a>
      </li>
      <li class="spark-footer__list-item">
        <a class="spark-footer__list-link" aria-label="LinkedIn" title="LinkedIn">
          <i class="spark-icon-social-linkedin spark-icon--fill"></i>
        </a>
      </li>
      <li class="spark-footer__list-item">
        <a class="spark-footer__list-link" aria-label="Instagram" title="Instagram">
          <i class="spark-icon-social-instagram spark-icon--fill"></i>
        </a>
      </li>
      <li class="spark-footer__list-item">
        <a class="spark-footer__list-link" aria-label="YouTube" title="YouTube">
          <i class="spark-icon-social-youtube spark-icon--fill"></i>
        </a>
      </li>
    </ul>
  </div>
</footer>

<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-scroll-to-top');
var scrollInstance = new Spark.ScrollToTop(el);

Accessibility Notes

To ensure that the scroll-to-top button is fully accessible, ensure that an aria-label attribute with the desired text is available to assistive devices. The examples illustrated in the Guidelines and Developer tabs, as well as below, use the text “Back to top” but this could also be “Scroll back to top.”

<button class="spark-scroll-to-top" aria-label="Back to top">
  <i class="spark-scroll-to-top__icon"></i>
</button>

To make it useful to keyboard users and users of other assistive devices, the scroll-to-top button should be placed towards the end of your HTML markup, ideally after your primary content but before the footer. In the examples in the Guidelines and Developer tabs, the button is placed prior to the closing </main> tag so that the button visually appears in the space between the main content container and the footer.