Layout · Gutenberg
Scroll To Top block for WordPress
Fixed scroll-to-top button that appears after scrolling down the page.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Fixed scroll-to-top button that appears after scrolling down the page.
Inspector panels on this block: Button, Position & Behavior. Those titles come from index.js, not from a shared template.
Behavior controls: “Button — Icon” options: Arrow Up, Chevron Up, Upload, Migrate, Sort; “Position” options: Bottom Right, Bottom Left, Bottom Center.
Where to find it
Gutenberg inserter → Layout → search “Scroll To Top” (block name `blockenberg/scroll-to-top` in block.json). Style it in the sidebar after insert.
How to use Scroll To Top block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Scroll To Top”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Button. Set “Button — Icon”, “Show Label”, “Label Text”, “Button Size (px)”.
- Check the published page. The view script reads HTML data attributes: data-smooth, data-trigger. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Button — Icon | Select control; the chosen value is saved on the block. Options: Arrow Up; Chevron Up; Upload; Migrate; Sort. block.json default: arrow-up-alt2. Saved as `icon`. |
| Show Label | On/off toggle in the inspector. Off by default. Saved as `showLabel`. |
| Label Text | Text field in the inspector. Saved as `label`. |
| Button Size (px) | Numeric range control in the inspector. Range 32–80. block.json default: 48. Saved as `btnSize`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 50. Saved as `btnRadius`. |
| Drop Shadow | On/off toggle in the inspector. On by default. Saved as `shadow`. |
| Pulsing Ring | On/off toggle in the inspector. Off by default. Saved as `pulsing`. |
| Position | Select control; the chosen value is saved on the block. Options: Bottom Right; Bottom Left; Bottom Center. block.json default: bottom-right. Saved as `position`. |
| Horizontal Offset (px) | Numeric range control in the inspector. Range 8–120. block.json default: 24. Saved as `offsetX`. |
| Vertical Offset (px) | Numeric range control in the inspector. Range 8–120. block.json default: 24. Saved as `offsetY`. |
| Scroll Trigger (px) | Numeric range control in the inspector. Range 50–2000. block.json default: 400. Saved as `scrollTrigger`. |
| Smooth Scroll | On/off toggle in the inspector. On by default. Saved as `smooth`. |
| Z-Index | Numeric range control in the inspector. Range 100–99999. block.json default: 9990. Saved as `zIndex`. |
| Button Background | Color control in the inspector. block.json default: #6c3fb5. Saved as `btnBg`. |
| Button Icon / Text | Color control in the inspector. block.json default: #ffffff. Saved as `btnColor`. |
| Label Font Size (px) | Numeric range control in the inspector. Range 9–24. block.json default: 11. Saved as `labelFontSize`. |
| Label Font Weight | Numeric range control in the inspector. Range 300–900. block.json default: 700. Saved as `labelFontWeight`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-smooth, data-trigger.
When this is the right block
- Fixed scroll-to-top button that appears after scrolling down the page — that is the job of Scroll To Top, not a generic content block.
- Use it when you need the editor control labeled “Button — Icon”, which exists on this block’s inspector.
- It matches pages about scroll, top, button.
- Inserter grouping: page structure, sections, and composition.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Scroll To Top block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Scroll To Top”. It sits under Layout. After insert, open Button and set “Button — Icon”, “Show Label”, “Label Text”, “Button Size (px)”.
What makes Scroll To Top different from other Blockenberg blocks?
Fixed scroll-to-top button that appears after scrolling down the page. Inspector labels on this block include “Button — Icon”, “Show Label”, “Label Text”, “Button Size (px)”.
Is the Scroll To Top Gutenberg block free?
Yes. Scroll To Top ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Scroll To Top to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Button, Position & Behavior).
Related layout blocks
Content Menu
In-page anchor navigation that highlights the current section as the user scrolls — can float fixed on the left or right, or sit inline.
Print / PDF Button
A print button that opens the browser print dialog (Save as PDF included). Supports custom icons via the shared icon picker.
Sticky Two Column
One column scrolls through feature highlights; the other stays sticky showing the active image — perfect for product tours and feature pages.
Bento Grid
Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights.
Breadcrumbs
SEO-friendly navigation trail with Schema.org markup showing the current page hierarchy.
Dark Hero
Dark glassmorphism hero for AI, SaaS and tech sites. Features glow effects, gradient text, optional floating stat badges, badge pill, and rich button controls.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Scroll To Top from the Gutenberg inserter.