Adding A Scroll To Top in Kadence

Estimated reading: 3 minutes 903 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 familiarize and configure a “Scroll to Top” button in Kadence:

Getting Started

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

If for any reason you’re not using Kadence and your theme does not have a scroll to the top, then adding a little code might be the perfect answer. Check out Scroll To Top Using Code (CSS).

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.

Adding A Scroll To Top in Kadence - Previous Setting Up Your Logo Next - Adding A Scroll To Top in Kadence Setting Up Feature Images

Leave a Reply

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

Share this Doc

Adding A Scroll To Top in Kadence

Or copy link

CONTENTS