Adding a Scroll-to-Top Button in Ghost via Code Injection

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:

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

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

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! 🚀