> ## Content Index
> Fetch the complete content index at: https://articles.akadata.co.uk/llms.txt
> Use this file to discover other available public pages before exploring further.

# Adding a Scroll-to-Top Button in Ghost via Code Injection
- URL: https://articles.akadata.co.uk/adding-a-scroll-to-top-button-in-ghost-via-code-injection/
- Published: 2025-02-22T19:45:09.000Z
- Updated: 2025-02-22T19:45:09.000Z
- Author: AKADATA

### Introduction

### Why Add a Scroll-to-Top Button?

A scroll-to-top button improves user experience by allowing visitors to quickly return to the top of a page with one click. Ghost themes may not include this feature by default. Still, instead of modifying theme files, you can inject the necessary code using Ghost's built-in **Code Injection** feature.

### Benefits of Using Code Injection in Ghost

- **There is no need to modify theme files** – it keeps your theme updates intact.
- **It works across all pages** and applies site-wide without additional setup.
- **Easy to implement** – requires only a few lines of CSS and JavaScript.
- **Lightweight solution** – no need for third-party plugins or scripts.

### How to Inject the Scroll-to-Top Button in Ghost

Ghost allows you to inject custom code directly into your site's **header** or **footer** via the Admin Panel.

**Step 1: Open Ghost Admin Panel**

1. Log in to your **Ghost Admin**.
2. Navigate to **Settings > Code Injection**.

**Step 2: Insert the Code**

Paste the following code inside the **Footer** section of Code Injection:

```css
<style>
  #scrollToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: none;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease-in-out;
  }

  #scrollToTopBtn:hover {
    background-color: #444;
  }

  #scrollToTopBtn.show {
    display: flex;
    opacity: 1;
  }
</style>

```

Then paste the script below and paste it below the `</style>` in the same screen.

```js
<script>
  // Create and insert the button dynamically
  document.addEventListener("DOMContentLoaded", function() {
    let btn = document.createElement("button");
    btn.id = "scrollToTopBtn";
    btn.innerHTML = "&#8679;";
    btn.onclick = scrollToTop;
    document.body.appendChild(btn);
  });

  // Scroll event to show/hide button
  window.onscroll = function() {
    let btn = document.getElementById("scrollToTopBtn");
    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
        btn.classList.add("show");
    } else {
        btn.classList.remove("show");
    }
  };

  function scrollToTop() {
    window.scrollTo({ top: 0, behavior: "smooth" });
  }
</script>
```

### **Step 3: Save and Test**

1. Click **Save** in the Ghost Admin panel.
2. Visit your Ghost website and scroll down the page.
3. Clicking it will smoothly scroll the page to the top.

A small, circular **scroll-to-top button** should appear in the bottom right corner.

![](https://articles.akadata.co.uk/content/images/2025/02/image-5.png)

## Conclusion

You can enhance your Ghost site without modifying the theme files by injecting this lightweight script. This approach is ideal for users who want to keep their themes **update-friendly** while adding custom functionality.

Now, visitors can easily navigate back to the top of your page with a single click! 🚀