By Philip Yiga | July 4, 2017

I’m sure you have seen lots of websites using a scroll back to top feature. We also use the same feature on all our long posts on YOSAKI – reason being that a scroll to top function makes it easy to navigate a detailed post.  In this article, I will show you how to put the same function in your newly installed WordPress website.

Method 1:- Back To Top Pro

To add a scrollup button in my WordPress websites, I use ‘’Back to top pro plugin’’

Back To Top Pro’s Scroll Back to Top Buttons – include home, back and email buttons. This means you can show an email option next to the scroll back to top button. However, I tried the email option on Yosaki and it was reducing on the page load speed – so I decided to opt for only 1 button (which is the scroll back to top button).

Below are detailed steps you should follow to see this function live on your website / blog.

 

Step 1:- Log into your WordPress website / blog

Step 2:- Go to -> Plugins -> Add New

Step 3:- Search for -> Back To Top Pro plugin.

Click the Install Now button

Step 4:- Install and activate Back To Top Pro plugin

Click the Activate button

Step 5:- Go to plugin settings

 

Step 6:- Click -> Start Using Your New Tools Now

By default, your email will be filled in the email field. This information is fetched from your WordPress general settings.

 

NOTE:- When you click on ‘’Start Using Your New Tools Now’’ button. You will be taken to Zatabox.

 

Step 7:- Login into Zatabox (since this is your first time to access Zatabox. You need to create a new account with them)

Step 8:- Access your dashboard and click on ‘’Back To Top’’

 

Step 9:- Customize the ‘’Back To Top’’ button

Select color, Icon size, Direction, Placement and Display when scroll screen.

By default, all free features for your button are ticked. However, the more you display in this area, the slower your website loads. So choose only 1 icon which is ‘’Back to top’’

 

Step 10:- Choose Icons (opt for only Back Top Icon)

Step 11:- Untick ‘’Back, Home and Email buttons ‘’ – so that you remain with a ‘’Back To Top’’ button only.

Step 12:- Click save

(After clicking the ‘’SAVE’’ button – the Scrollup Button will be displayed on your website)

---

 

METHOD 2:- WPFront Scroll Top

WHAT IS WPFront Scroll Top? It is a plugin which allows website vistitors easily scroll back to the top of the page / post. This is an ideal plugin for long posts of about 2000 words ++++

 

Step 1:- Go to Plugins – Add new

Step 1:- Search for WPFront Scroll Top

Step 3:- Install the plug-in & activate it

Step 4:- Go to WpFront Settings

WPFront Scroll Top Settings

 

Enable WpFront Scroll Top by ticking ”Enabled”

You can edit the ”Scroll Duration” basing on the structure and length of your content.

Filter ”Display on Pages & Posts

 

By default – this plugin will display on all Pages & Posts. But under the settings section, you can command it to display on Specific Pages / Posts….

Choose Image to be displayed

Click save

Step 5:- Preview your website and see how the Scrollup Button is displayed.

CONCLUSION:

I have installed and tested both Plugins but the last plugin(WP Front)  is very easy to use & customize. Back To Top Pro has very nice features and Addons’ but It is not that flexible to a beginner.

RELATED POSTS:

How To Install WordPress Plugins
How To Add Buttons In WordPress Without Using Short Codes
How to Add a Portfolio to a WordPress Website
How to Add a Contact Form to Your WordPress Website