Scroll to top widget in Ghost

Navigating a website should be intuitive and user-friendly, ensuring that visitors can access information with ease. One simple yet effective feature to enhance site navigation is a “scroll to top” button. The Scroll to top widget provides a seamless way for readers to quickly jump back to the beginning of lengthy posts or pages, enhancing usability and keeping them engaged. Follow the steps below to add the scroll to top widget to your Ghost CMS website using Ghost code injection.

<button class="scroll-top" onclick="window.scrollTo({ top: 0, behavior: 'smooth' });">
<svg class="scroll-to-top-icon" width="24px" height="69px" viewBox="0 0 24 69">
  <g id="light" transform="translate(2, 2)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect fill="currentColor" x="9" y="7" width="2" height="60"></rect><polygon stroke="currentColor" stroke-width="2" points="10 0 20 13 0 13"></polygon></g>
  <g id="dark" transform="translate(2, 2)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect fill="currentColor" x="9" y="7" width="2" height="60"></rect><polygon stroke="currentColor" stroke-width="2" points="10 0 20 13 0 13"></polygon></g>
</svg>
</button>

<script>
window.onscroll = function() {
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    document.querySelector('.scroll-top').classList.add('visible')
  } else {
    document.querySelector('.scroll-top').classList.remove('visible')
  }
  
  // Calculate scroll progress
  const scrollTop = document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrollPercentage = scrollTop / scrollHeight;

  // Update the clip-path based on scroll progress
  const clipHeight = 69 - (69 * scrollPercentage); // 69 is the height of the SVG
  document.querySelector('.scroll-top #dark').style.clipPath = `inset(${clipHeight}px 0 0 0)`;
}
</script>

The code above adds a “scroll to top” button to a webpage. The button contains an SVG icon and uses JavaScript to:

Scroll the window to the top smoothly when clicked.
Toggle the button’s visibility based on the scroll position.
Dynamically update the button’s icon to visually represent the user’s scroll progress using a clip-path effect.

<style>
  .scroll-top {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 200ms ease;
    color: var(--ghost-accent-color);
  }
    
  .scroll-top.visible {
    visibility: visible;
    opacity: 100;
  }
  .scroll-top #light { opacity: 0.25; }
  .scroll-top #dark {
    clip-path: inset(69px 0 0 0);
    transition: clip-path 0.1s ease-out;
  }
</style>

The CSS code above styles a “scroll to top” button and its SVG icon, focusing on positioning, appearance, and transitions:

The button is fixed at the bottom left of the viewport and is initially hidden.
It becomes visible and fully opaque when the visible class is added.
The SVG icon has a light part that is partially transparent and a dark part that can be dynamically clipped based on scroll progress.
Smooth transitions are applied to the button’s visibility and the SVG’s clip-path for a polished user experience.

Scroll to top demo

Scroll to top widget

Scroll to top widget markup and icon

Scroll to top widget styles