General – Kadence

Kadence Scroll To Top

Estimated reading: 2 minutes 113 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 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.
General – Kadence - Previous Creating Sticky Sidebars In Kadence Next - General – Kadence Setting Up Feature Images In Kadence

Leave a Reply

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

Share this Doc

Kadence 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