Get Started

Scroll Top

3 min read

0:00 2:58

The Scroll Top Block adds a floating button that appears after visitors scroll down a page. When clicked, the button smoothly scrolls the page back to the top. You can customize the icon, visibility threshold, button position, size, colors, border, shadow, and spacing for different devices.

How to Add a Scroll Top Block

Step 1: Add the Scroll Top Block

  1. Open the page or post where you want to add the Scroll Top Block.
  2. Click the + (Add Block) button in the Gutenberg editor.
  3. Search for Scroll Top.
  4. Select the Scroll Top Block to insert it into your page.
  5. Select the block to open its settings in the sidebar.
  6. Configure the icon, scroll threshold, position, size, and appearance according to your design.

Step 2: Configure the Scroll Top Block

The available tabs are:

  • Settings: Choose the scroll-to-top icon and set when the button appears.
  • Layout: Configure the button size, horizontal position, and offsets.
  • Style: Customize the icon, background, border, shadow, radius, and padding.
  • Advanced: Configure spacing and background settings for the entire Scroll Top Block.

Settings Tab

1. Scroll to Top

  • Icon: Choose the icon displayed inside the scroll-to-top button. Use the icon picker to select an icon or remove the icon.
  • Show After Scroll (px): Set how far the visitor must scroll down the page before the button appears. Enter the threshold in pixels. If no value is set, the default threshold is 150 pixels.

Layout Tab

1. Position & Size

  • Button Size (px): Set the width and height of the button in pixels. You can configure the size separately for desktop, tablet, and mobile devices.
  • Horizontal Position: Choose where the floating button appears horizontally.
    • Right: Position the button on the right side of the screen.
    • Left: Position the button on the left side of the screen.
  • Horizontal Offset (px): Set the horizontal distance between the button and the screen edge. The offset is measured in pixels.
  • Bottom Offset (px): Set the distance between the button and the bottom of the screen in pixels.

Style Tab

1. Button

  • Icon Color: Set the color of the icon in its normal state.
  • Background: Set the button’s background color or gradient in its normal state.
  • Border: Customize the button border, including its width, style, and color.
  • Box Shadow: Add and customize a shadow around the button.
  • Icon Color (Hover): Set the icon color when visitors hover over the button.
  • Background (Hover): Set the background color or gradient when visitors hover over the button.
  • Border Radius: Adjust the roundness of the button’s corners.
  • Icon Size (px): Set the icon size in pixels. You can configure the size separately for desktop, tablet, and mobile devices.
  • Padding: Adjust the inner spacing around the icon within the button. You can configure padding separately for desktop, tablet, and mobile devices.

Advanced Tab

The Advanced tab controls spacing and background settings for the entire Scroll Top Block.

1. Spacing

  • Padding: Set the outer padding around the Scroll Top Block. Values can be configured separately for desktop, tablet, and mobile devices.
  • Margin: Set the outer margin around the Scroll Top Block. Values can be configured separately for desktop, tablet, and mobile devices.

2. Background

  • Background: Set a background color or gradient for the entire Scroll Top Block.
Updated on October 17, 2026

What are your feelings

  • Happy
  • Normal
  • Sad
Table Of Contents

Download Now & Design Without Limits!

Bring your Gutenberg designs to life with ShapeBlock create stunning, animated websites effortlessly. No code. No limits. Just motion made easy.

Get Started Free
Buy Now
FAQ

Frequently
Asked Questions

Common questions answered, if you still have any
questions
feel free to ask.

What is ShapeBlock?
ShapeBlock is a block library for the WordPress block editor. It adds 33 native blocks sliders, carousels, grids, tabs, counters, filters and more each with Settings, Layout and Style tabs (plus a shared Advanced tab) and a live preview on the canvas.
No. The blocks are native to the block editor, so there is no page-builder layer and no shortcode is needed for normal use. ShapeBlock does not depend on any other plugin.
Upload the plugin via WordPress Dashboard or FTP and activate it.
WordPress 6.6 or newer and PHP 7.4 or newer.
ShapeBlock is built to stay light. A block’s styles are added only to pages that contain that block, small stylesheets are printed inline instead of as extra requests, and nothing relies on jQuery. Blocks you switch off are never registered at all.
Yes. The ShapeBlock dashboard lists every block with a switch. A disabled block is not registered, so it adds nothing to the editor or to your pages.
Yes. Most spacing, size, alignment and typography controls take a separate value for Desktop, Tablet (up to 1024px) and Mobile (up to 767px). Leave a device empty and it follows the larger screen.
Yes. Blocks render the same in both, and their styles are printed in the page head rather than whenever the theme happens to run.
Not by default. Google Fonts is optional and stays off until you enable it in ShapeBlock → Settings. Video blocks only load YouTube or Vimeo when you add a video link, and share buttons are plain links that do nothing until a visitor clicks them.
Yes. The Theme Builder lets you build headers and footers with blocks and choose where each one appears with display conditions. Reusable templates can be placed anywhere with the shortcode.
Yes. ShapeBlock → Settings can export and import your block settings, colours, layout, templates and Theme Builder templates as a file, so a second site can start from the same setup.

Our core value is regularity, responsiveness, and innovation. This is why people love us With the qualified dedicated support.

Follow our Socials

Useful Link

Supports

News Letter

Subscribe to our newsletter

© All Rights Reserved – shapeblock by ShapeKode.