Contents
The scroll to top button is not something you are unfamiliar with. There are many websites use that feature. WordPress’ themes tend to support that feature out of the box too. My theme has a button to scroll to the top of the page when I’m reading a long post too. However, the button is not what I like. I could go and modify the code to change the button but that would be very time consuming and it’s not the best practice. So, I decided to make a plugin that enables users to add a Scroll to top button to their site.
What’s the difference between this plugin and other plugin? You may ask. Well, the difference is you can fully customize the button as you like. You can change the image, make it hidden on mobile devices (if you like). You can also change the width, height, padding and the position of the button on the screen.
Sounds good? Let’s meet the plugin.
So, the plugin only has one screen for all of its settings. Here are all of them:
As you can see, you can set the button’s width and height in many different units. You can use pixel, em, rem, %… I would recommend you use a square ratio (1:1). However, if you find a different ratio works for you, don’t hesitate.
The padding box allows you to enter the padding value of the icon. This is the padding for all sides. You can specify the value in px, rem, % just like width and height. However, make sure you enter the unit along with the number. For example 4em, 5%…
There are two possible positions for the scroll to top icon. They are bottom left and bottom right. I hardly imagine a scroll to top button stays at the top of the page. However, you can correct me and I’ll add more positions for you.
Now, the most important part of the plugin is the content of the button. As you can see, you can set the content of the icon with a full-featured text editor. Here, you can put whatever you want: text, image or even videos. However, I would recommend you use png images. There are plenty of up arrow, scroll to top button on the internet. One place I usually go to get the icon is flaticon.com. They have many good icons you can use for the scroll to top button.
After that, you can click on save changes and see the scroll to top button appears on your site.
If you need video instructions, here it is:
Conclusion
It’s a plugin I made because I find the scroll to top button should be flexible. There are room for improvements, of course. If you have any question and suggestions, please let me know.
