Interactive

Scroll to Top & Progress

A back-to-top button and/or a reading-progress bar tied to page scroll.

Live demo

See it in action

Scroll this page — a back-to-top button fades in at the bottom-right, and a reading-progress bar fills along the very top.

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section class="fw-flexbox fw-flex fw-contained fw-collapse">
	<div class="scroll-to-top stt-4fdd479f fw-stt fw-stt--pos-bottom-right fw-stt--shape-circle fw-stt--size-md fw-stt--prog-top" style="--stt-prog-h:4px;" data-stt="1" data-after="300">
		<div class="fw-stt__progress" data-stt-progress aria-hidden="true">
			<span class="fw-stt__progress-fill"></span>
		</div>
		<button type="button" class="fw-stt__btn" data-stt-top aria-label="Scroll to top"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M6 11l6-6 6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
	</div>
</section>

To learn more about the Scroll to Top & Progress shortcode, please check out the online manual here.