---
title: Scroll Top
description: 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,…
url: "https://shapekode.com/product/shapeblock/docs/scroll-top/"
updated: "2026-10-17"
category: "Header & Footer Block"
---

# Scroll Top

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.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-82.png)

### 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.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-83.png)

## 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.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-84.png)

## 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.