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>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12">
				<div class="scroll-to-top stt-5ce2b8e3 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>
			</div>
		</div>
	</div>
</section>

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

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free