Scroll To Top

Monogram includes a floating Scroll To Top button that appears after the visitor scrolls down the page. Clicking it smoothly scrolls the page back to the top. The button also features an optional circular progress ring that shows how far down the page the visitor has scrolled.

#How It Works

The button starts hidden and becomes visible once the visitor scrolls past a configurable threshold (300 pixels by default). As the visitor scrolls further, the progress ring fills to show their position within the page. A percentage label inside the button displays the scroll progress as a number.

When the visitor reaches the bottom of the page (100% scroll), the button enters an "end" state with a visual indicator. Clicking the button at any point triggers a smooth scroll animation back to the top.

The button is hidden on mobile devices to keep the interface clean on smaller screens.

#Settings

Navigate to Appearance > Customize > Scroll To Top to configure the feature.

Setting	Type	Default	Description
Enable Scroll To Top	Toggle	On	Show or hide the scroll to top button across the entire site.
Show Progress Ring	Toggle	On	Display the circular progress indicator around the button that fills as the visitor scrolls.
Display Threshold	Number (0–2000 px)	300 px	How far the visitor must scroll (in pixels) before the button appears. Set to 0 to show it immediately.
Button Size	Slider (35–120 px)	50 px	Diameter of the button in pixels.
Button Position	Radio	Right	Which side of the screen the button appears on - Left or Right.
Edge Offset	Dimension	20 px	Distance from the screen edge. Accepts any CSS unit (e.g., 20px, 1.5rem).

#Automatic Updates

The button automatically recalculates its progress when:

• The page finishes loading

• The browser window is resized

• New content is loaded via AJAX (load more posts, auto-load next post)

• The document height changes for any reason (tracked via ResizeObserver)

This means the progress ring stays accurate even on pages with dynamic content.

Last updated 19 Aug 2026