This tutorial will show you how to add a scroll to the top button to your Ghost theme. So that users can quickly scroll back to the top. When your page is lengthy, you may want to provide users with the ability to swiftly scroll back to the top. In such situations, adding a button that appears after the user scrolls a certain amount of pixels is the optimal approach.

All those buttons typically float in the bottom corner of websites and, when clicked, return the user to the top of the page. They are rather simple to create with JavaScript; we need to ensure they are unobtrusive and large enough to push or click.

Starting out simple, we’ll add more functionality later, like tracking the scroll progress and showing it on the button.

The classic scroll-top button in the ghost theme

Here is the formatting for a button with an arrow going upwards:

<button class="btn-toggle-round scroll-top js-scroll-top" type="button" title="Scroll to top">
  <svg xmlns="http://www.w3.org/2000/svg " class="icon icon-tabler icon-tabler-arrow-up " width="24" height="24" viewBox="0 0 24 24" stroke-width="" stroke="cuurentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
    <line x1="12" y1="5" x2="12" y2="19" />
    <line x1="18" y1="11" x2="12" y2="5" />
    <line x1="6" y1="11" x2="12" y2="5" />
  </svg>
</button>

Customizing the button for the ghost theme:

.scroll-top {
  position: fixed;
  z-index: 50;
  padding: 0;
  right: 20px;
  bottom: 20px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);    
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all .4s ease;
  border: none;
  box-shadow: inset 0 0 0 2px #ccc;
  color: #ccc;
  background-color: #fff;
}

.scroll-top .icon-tabler-arrow-up {
  position: absolute;
  stroke-width: 2px;
  stroke: #333;
}

.scroll-top:hover {
  color: var(--ghost-accent-color);
}

.scroll-top:hover .icon-tabler-arrow-up {
  stroke: var(--ghost-accent-color);
}

The previous CSS will put the scroll top button to the bottom right corner of the page; however, you may easily alter the position, colors, and any other aspect.

Now, to make the button functional, we need a piece of javascript, which can be inserted into the button (on click event) or injected separately:

const scrollTopBtn = document.querySelector('.js-scroll-top');
if (scrollTopBtn) {
  scrollTopBtn.onclick = () => {
    window.scrollTo({top: 0, behavior: 'smooth'});
  }
}

Now that we have the fundamental functionality and design let’s examine how we might improve it.

Visualizing the appearance of the button

Since you don’t need to scroll up while you are at the top of the page, you probably wouldn’t want the button to be shown by default. So let’s tweak this and limit how far the user can scroll before making the bottom visible.

To do this, we must monitor the scroll event and modify the top scroll button:

.scroll-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);  
}

.scroll-top.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
Ghost theme

Great, now you can create a scroll top button easily. We hope this article will help you add a scroll-top button in the ghost themes for your website. Learn more about ghost themes, then visit our ghost theme customization learning website themeix.com

Leave a Comment

No Comment