A complex web page design results in a higher bounce rate. So, you should always pay extra attention to the usability of your WordPress site.
For instance, a blog with long form content and a large number of comments suffers from usability problems due to the endless scrolling that goes along with reading and browsing it. Using a simple “Scroll to Top” or “Back to Top” button (also known as an HTML bookmark) allows users to jump directly to the top of the page.
In web design, HTML bookmarks are very common, but the one-click jump from bottom to top is probably the best known.
How to Create Back to Top Button (HTML Bookmark) in WordPress
It is not hard to add back to top functionality to your WordPress blog.
Here’s a step by step guide:
1. The first step is to define the bookmark’s target or destination point. Add an html tag (ideally an <a> tag) directly below the body tag of your WordPress page template. Your active theme’s header.php file usually contains the body tag. Just after the body tag, insert the following code:
<a name="BacktoTop"> </a>
The text “BacktoTop” can be changed to something that you prefer.
2. Next, you need to create another anchor tag to link back to the first one you created earlier (at the top of the page). This second anchor tag should normally be inserted into your theme’s footer.php.
<a href="#BacktoTop"> Go to Top </a>
The text “BacktoTop” must be the same as the text you chose in the first step. Instead of plain links, you can use an image or an icon as well.
<a href="#BacktoTop"> <img src = "https://example.com/image.jpg" /> </a>
Other templates, such as comments.php, can also incorporate this anchor tag. In the first step, add the target anchor tag to index.php, archive.php, page.php and single.php template if you are adding the anchor tag to the comments.php template.
Alternatively, you can find the id of an anchor tag located within the header area of your website, such as one in your navigation menu.
<body>
<div id="Nav-Menu">
menu Items
</div>
</body>
Then target the menu item like this:
<a href="#Nav-Menu">Back To Top</a>
This way you can put a “Back to Top” button in the WordPress menus section as well. See the screenshot below:
Pro Tip: You can also create a sticky image “Scroll to Top” button using the same method. Insert the following html code into a WordPress widget or template file:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#"><img src="https://lh6.ggpht.com/_7wsQzULWIwo/SgXYIY37QsI/AAAAAAAABDY/IyDZK-CJzdA/Up1Blue%5B4%5D.png"/></a>
There are quite a few other alternatives using jquery and javascript which offer additional effects. Check out this tutorial for more information: http://webdesignerwall.com/tutorials/animated-scroll-to-top
You can also do this using WordPress plugins. To learn more, watch the video tutorial below:
Video: Add a Back to Top Button in WordPress
1 thought on “3 Ways to Add a Back to Top Button in WordPress”