Scroll to Top

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

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

<main id="content" style="position: relative; padding-bottom: 4rem;">

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

  <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>
            <th 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>
              </label>
            </th>
            <th data-sort="asc">
              Flight No.
            </th>
            <th data-sort>
              Departs
            </th>
            <th data-sort class="spark-table__no-border">
              Arrives
            </th>
            <th></th>
          </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>
              </label>
            </td>
            <td>
              <input type="text" value="DL0431" name="flight[]">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="ATL" name="departs[]">
            </td>
            <td>
              <input type="text" value="SFO" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="CDG" name="departs[]">
            </td>
            <td>
              <input type="text" value="BER" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="DL0431" name="flight[]">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="ATL" name="departs[]">
            </td>
            <td>
              <input type="text" value="SFO" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="CDG" name="departs[]">
            </td>
            <td>
              <input type="text" value="BER" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="DL0431" name="flight[]">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="ATL" name="departs[]">
            </td>
            <td>
              <input type="text" value="SFO" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="CDG" name="departs[]">
            </td>
            <td>
              <input type="text" value="BER" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="DL0431" name="flight[]">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="ATL" name="departs[]">
            </td>
            <td>
              <input type="text" value="SFO" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="CDG" name="departs[]">
            </td>
            <td>
              <input type="text" value="BER" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="DL0431" name="flight[]">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="ATL" name="departs[]">
            </td>
            <td>
              <input type="text" value="SFO" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="CDG" name="departs[]">
            </td>
            <td>
              <input type="text" value="BER" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="DL0431" name="flight[]">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="ATL" name="departs[]">
            </td>
            <td>
              <input type="text" value="SFO" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="CDG" name="departs[]">
            </td>
            <td>
              <input type="text" value="BER" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>
              </label>
            </td>
            <td>
              <input type="text" value="AA1321" name="flight[]">
            </td>
            <td>
              <input type="text" value="DFW" name="departs[]">
            </td>
            <td>
              <input type="text" value="DTW" name="arrives[]">
            </td>
            <td class="spark-table__actions--icons">
              <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
              <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" 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>

</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" 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" 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" 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" 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" title="YouTube">
          <i class="spark-icon-social-youtube spark-icon--fill"></i>
        </a>
      </li>
    </ul>
  </div>
</footer>
// Vanilla JS
var el = document.querySelector('.spark-scroll-to-top');
var scrollInstance = new Spark.ScrollToTop(el);

// jQuery
$('.spark-scroll-to-top').sparkScrollToTop();

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. It can be instantiated using new Spark.ScrollToTop(el) or $(el).sparkScrollToTop(). It takes two optional arguments: containerEl and scrollToEl. These specify which element the button should be anchored to, and which element is scrolled to when the button is clicked. They default to the parentNode of the button and the top of the viewport, respectively.