Scroll to Top

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

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.

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.

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.

Open in New Tab

<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.

Default Component
- When to Use
- When Not to Use
Usage & Appearance
Developer Notes

Scroll to Top

Default Component

When to Use

When Not to Use

Usage & Appearance

Developer Notes