> For the complete documentation index, see [llms.txt](https://awecommerce.gitbook.io/awe-seasonal-effects/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://awecommerce.gitbook.io/awe-seasonal-effects/getting-started/effects/scroll-to-top.md).

# Scroll to top

Add a seasonal back-to-top button that appears once shoppers scroll.

A seasonal back-to-top button that appears once shoppers scroll down, and takes them back to the top in one click.

To get started:\
**Open** a campaign → **Elements** → **Scroll to top** → **Edit settings**.

The settings are grouped into 4 cards: **Button**, **Appearance**, **Placement** and **Animation**.

***

## 1. **Button**

<figure><img src="https://2143911517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh99vPHicsa9fNoUu2h0S%2Fuploads%2Fgit-blob-0e3417593079efbee4e09f7fffab35a1cc097f00%2Fscroll-to-top-01-button.png?alt=media" alt="Scroll to top button content"><figcaption></figcaption></figure>

### **1.1 What the button shows**

**Icon** (default), **Text**, or **Icon + text**.

### **1.2 Icon**

Pick one of 33 built-in icons, or click **Upload image** to use your own (PNG, JPEG, WebP or GIF, up to 2 MB). Your last 12 uploads stay available.

### **1.3 Button text**

Up to 10 characters (default `TOP`). Shown for **Text** and **Icon + text**.

## 2. **Appearance**

* **Button width** and **Button height**: 20–200 px (default 50).
* **Button padding**: 0–60 px (default 10).
* **Corner radius**: from **Square** to **Round** (default **Round**, a circle).
* **Colours**: **Icon colour**, **Background**, and their **on hover** versions. Tick **Transparent background** to show the icon only.
* **Border**: **Style** (**Solid** by default, Dashed, Dotted or None), **Width** (0–10 px, default 1) and **Border colour**.

## 3. **Placement**

<figure><img src="https://2143911517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh99vPHicsa9fNoUu2h0S%2Fuploads%2Fgit-blob-42e6861c13c88563f04c984f1b9d11798f48ba32%2Fscroll-to-top-02-placement.png?alt=media" alt="Scroll to top placement"><figcaption></figcaption></figure>

* **Button position**: **Bottom right** (default), Bottom left, Bottom center, Top right, Top left or Top center.
* **X offset** / **Y offset**: distance from the edge of the screen, 0–400 px (default 20).
* **Show after**: how far the shopper scrolls before the button appears — **Half a screen**, **One screen** (default), **Two screens** or **A custom distance** (0–5000 px).

## 4. **Animation**

<figure><img src="https://2143911517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh99vPHicsa9fNoUu2h0S%2Fuploads%2Fgit-blob-fe84635674d5d0e7b7b30491b4beb33494ce86ab%2Fscroll-to-top-03-animation.png?alt=media" alt="Scroll to top animation"><figcaption></figcaption></figure>

* **Scroll animation**: how the page travels back up — **Linear** (default), Ease out, Ease in-out, Back, Bounce, Elastic, Step or Instant.
* **Scroll duration**: 0–5000 ms (default 1000).
* **Button animation**: how the button appears or catches the eye — **Fade in** (default), Slide up, Scale in, Bounce, Elastic pop, Blur in, Spin in, Rocket launch, Pulse, Glow halo, Swing or Arrow nudge.

→ *If your theme already has its own back-to-top button, turn one of them off so shoppers don't see two.*

***

💬 If you have any related questions, please contact us via **Live chat** in the app.