Create a “Scroll to top” hovering button on your WordPress blog
For those who have lengthy way of writing for their WordPress blog, they will probably have problem in retaining readers’ attention on their WordPress blog.
It is because the readers have to scroll all way down to read the lengthy article and sometimes need to scroll up to find back points or something that caught their attention while reading our WordPress blog’s article.
Scroll Up? Boring and Frustrating
This can be troublesome for our WordPress blog readers. They can get frustrated as they need to scroll up and down to find the section that they are interested with.
Therefore, I would like to share one quick tutorial with you that can help to increase your blog navigation and to avoid your readers to have scroll up and down which can be pretty boring and frustrating. I learnt this tutorial form WpRecipes but with improvemnet from Huzzer Magazine.
This tutorial will show you how can you create a button for your WordPress blog that will help your readers to scroll up back to blog headers in second.
Tutorial: “Scroll to top” hovering button
To make the hovering scroll button – you can head to my previous blog article: Create Hovering Button in Your WordPress blog.
After you have selected proper button or image that will let your readers know that they need to click the button to scroll back up to the blog header, you need to insert below code to the link section:
That’s all. Now, you will have “Scroll to top” hovering button for your WordPress blog for better blog navigation and help to reduce your WordPress blog’s bounce rate.
If you do not want to have such button in your blog and prefer minimalist approach, you can just out put the “Scroll to top” link at the end of each WordPress blog’s post by using below code:
<p style=”text-align: center;”><a href=”#header“>Scroll to top</a></p>
*<p style=”text-align: center;”><a href=”#help your readers to scroll up“>Text that will appear in each articles</a></p>*
However, if you want to put button rather than words, you can use below code:
<p style=”text-align: center;”><a href=”#header”><img src=your image url for the button” alt=”Scroll Up” /></a></p>
Then, you have to open single.php in your Theme Editor section and paste the above code right after <?php the_content(); ?>
With the above the code, there will be link or image at the end of each post which is located at the centre of the content section.
Creativity is The Key!
This hack is flexible to any kind of modifications and the sky is the limit! As long as you do not put any boundary to your creativity, there are a lot of things you can do to help your WordPress blog readers to scroll your WordPress blog page up. The only think you have to remember is the #header which is the key of this hack.
Hope you can use and implement this hack with your WordPress blog. Feel free to share how you help your readers to scroll up your WordPress blog page. I do believe that there are a lot of creative people out there.
Am I right?