General – WordPress

Configure Scroll To Top

Estimated reading: 4 minutes 85 views

A Scroll to Top button provides several benefits for websites. When readers reach the bottom of the page, they usually want to scroll to the top effortlessly. Using a button to quickly navigate back to the top without manually scrolling, especially on long pages, improves user experience.

Scroll to Top also helps vulnerable users who might find scrolling back up a long page tiring or difficult, particularly those with disabilities. A Scroll to Top button simplifies the process, improving accessibility. Also, for users who are not as comfortable with complex navigation, this button offers a clear and simple way to navigate a page efficiently.

When navigation is smoother, users are more likely to stay and engage, reducing the likelihood of abandonment.

Follow these steps to familiarise and configure a “Scroll to Top” button:

Scroll To Top Using Kadence

Kadence has built-in options for adding a Scroll to Top button, making it simple to enable and customize without needing custom code. Steps to enable and customize the Scroll to Top button in Kadence:

scroll to top
  • Go to Appearance > Customize > General > Scroll to Top.
  • Enable Scroll To Top, then go through the settings to design its appearance and behavior.
  • Icon: Choose between icon styles for the button (e.g., arrow icons).
  • Icon Size: Adjust the size of the scroll icon.
  • Position: Set the button’s position (left, right, or center) on the screen. It is good practice to set it to the right because the majority of people look that way to check it.
  • Color: Set the button’s color, including the background, hover, and icon.
  • Border Radius: Adjust the button’s shape (circular or square).
  • Offset from Bottom: Define how far the button should appear from the bottom of the screen.
  • Visibility: Set to PC and tablet only.
  • After configuring the settings to your liking, click Publish to save.
  • Cache your website, then check your Scroll To Top; click on it to verify that it smoothly scrolls the page to the top. To cache your website, we recommend Litespeed Caching or FlyingPress.

Scroll To Top Using Code

First, add the button HTML somewhere on your webpage, ideally at the bottom of the page (inside the <body> tag).

<!-- Scroll to Top Button --> <button id="scrollToTopBtn" title="Go to top">↑</button>

You can style the button to make it look good and position it at the bottom-right of the screen. Here’s an example:

/* Scroll to Top Button Styles */ scrollToTopBtn { display: none; /* Hidden by default / position: fixed; / Fixed position on the screen / bottom: 20px; / 20px from the bottom / right: 20px; / 20px from the right / z-index: 99; / Ensures it's on top of other elements / background-color: #333; / Button background color / color: white; / Text color / border: none; / Remove borders / padding: 15px; / Padding inside the button / border-radius: 50%; / Make it a circular button / cursor: pointer; / Pointer cursor on hover / font-size: 18px; / Font size for the arrow */
} scrollToTopBtn:hover {background-color: #555; /* Darker background on hover */
}

Change the colors and padding to your preference.

Scroll To Top Using A Plugin

We do not recommend using extra plugins because too many can cause performance and conflict issues. However, if you want to add a Scroll to Top feature because your site doesn’t use Kadence and or you don’t like adding code, then here’s how you can do it using a plugin:

  • WPFront Scroll Top is a widely used plugin that offers customization options for the scroll-to-top button. Locate the plugin from your dashboard, click Install Now, then click Activate once the installation is complete.
  • Once the plugin is activated, click Settings > Scroll Top in the WordPress Dashboard menu. Here, you can customize the behavior and appearance of the Scroll to Top button. After making your customizations, save, cache, and refresh your website before checking it.

For caching your website, we highly recommend Litespeed Caching or FlyingPress.

NOTE: If some of these options are unavailable, you most likely do not have the Kadence Pro installed.

General – WordPress - Previous Adding Jump Links In Posts Next - General – WordPress Adding Custom CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

Share this Doc

Configure Scroll To Top

Or copy link

CONTENTS

Join The Party For Fun Updates freebies & Big Discounts!

Add your name
Add your email

JoiN Glamsy Cloud! Free STUNNING Kadence Templates Included!

Start with 5 gorgeous Kadence blocks on us. Love them? Unlock ‘50 FREE FOREVER‘ that’s 50 more free blocks just for choosing any essential tool from our trusted fav stack!

Grab Your Free Templates
Knowledge BaseContact Us

Terms Of Use FAQs

Payment FAQs

Order FAQs

Support FAQs

Popular Pre-Sales FAQs

Redesigning FAQs

Adding A Sticky Sidebar Using CSS

If you prefer using custom code to create a sticky sidebar, create or edit a pag

Scroll To Top Using Code Using CSS

First, add the button HTML somewhere on your webpage, ideally at the bottom of t

Choose Your Hosting

Like many people, we started our online journey with one of the big-name hosts—a

Start Here

Glamsy Designs is thrilled to introduce a new documentation system that makes ac

Frequently Asked Questions

Creating Sticky Sidebars Using CSS

We are covering three ways of creating sticky sidebars using Kadence, CSS code,

Chat Icon Close Icon
Review Your Cart
0
Add Coupon Code
Subtotal
Checkout

 

Subscribe

×
Cancel