Back to top can be a simple text link or a button that is generally placed in the footer section and when clicked will return to the page top – header. Many sites don’t have it but using that will make your users more comfortable especially if you have lengthy pages where they have to scroll all the way to reach top. So using Back to top links is definitely useful. It’s a simple 2 min work and let’s see how to do it now.
Related Read:
3 Important Elements of Blog Design
Stylize your Blog Post Headers
Back to Top Link
How to make Back to Top Link
Step 1: First you open the file header.php in your theme, then find what selector is used after tag. See a sample header.php code below for example.
<body> <div id="wrapper"> <!-- begin header --> <div id="header">
Here div id=”wrapper” is the first selector that is located just under the body tag . Most of the templates usually use wrapper as an opening selector. Selectors such as top,wrap are also common. So you just see which selector is below body that’s it.
Step 2: Then you open the file footer.php, copy the code below and put that somewhere in the footer according to your design.
<a href="#wrapper">Back to Top</a>
So now when you click Back to Top in your footer it goes to the top of your page. Just go down and see it in action in this blog.
Subscribe to Webfroze
Subscribe to our e-mail newsletter to receive updates. Don't miss it.
Comments on this entry (1 comment)
Did you like this post? You can share your opinion with us! Simply click here.