How To Display an Image Scroll To Top in WordPress

Ever wanted to put an image in place of an old scroll-to-top icon on your website?

A scroll-to-top is an icon that takes you to the top of the webpage when clicked.

Usually, it is a simple arrow icon. Nothing anyone would notice.

But an image, such as your mascot or your face pointing upwards? It surely will leave an impression on your visitors.

In this article, I’ll show you how to put an image instead of a simple scroll-to-top icon.

Fortunately, for WordPress users, this is fairly easy.

Step 1: Install To Top Plugin

Firstly you need to install a free WordPress plugin called To Top. Click here to download and install the To Top plugin.

Step 2: Go to the Customization Settings

Go to your theme’ customization settings and click on the To Top option.

Then select the basic settings.

Step 3: Set an Image Replacing the Scroll-to-Top Icon

In the basic settings click on the style drop-down menu. Select the Image option from the drop-down menu.

(By clicking on the Advanced Settings menu you can also set a timer before the image disappears.)

A new set of options to choose a scroll-to-Top image will now appear on the same page.

Click on the Change Image button and select an image you’d like to use as your scroll-top-Top icon.

Upload an image of any size. You can set the desired size through the image width option.

Try Canva if you’d like to create a custom Scroll-To-Top graphic.

Finalize your selection and click on Choose the Image Button.

Your Scroll-To-Top image is now set. Below is an example of how it looks on a website:

It’s a nice little attention to detail trick you can use to improve your branding. Or, you can do it because it’s much more fun to have something unique.

I hope this tutorial helped you and inspired you to try something new.

If you’ve any questions, let me know in the comments section below.

Leave a Reply

Your email address will not be published.