Today, most people are not very familiar with using different programming languages like Html, css,…
How To Add A Scroll Back To Top Button On A WordPress Site – Short Course
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
Step 5:- Preview your website and see how the Scrollup Button is displayed.
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.