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:

#header

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.

Further Modifications

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?

31 Responses to Create a “Scroll to top” hovering button on your WordPress blog

  1. Ben Lang says:

    Super WordPress tips. Thanks Helmi for these tips, Ill use them when working on my entrepreneur blog!

  2. I would like to ask if there can be a “Skip Post” link. Something which users can click on and they automatically get scrolled down to the next post.

    That would be more useful for the readers. Is it possible? If so, how?

  3. This is a very useful tip. I often find that it takes too long to always scroll to the top of a long blog post.

    Thanks!

  4. CBSE Sample Papers:

    You could use some simple PHP, so that the div around each post gets a unique ID, starting from 1 (in a variable called $id, or something). Then add a link to $id+1.

    Then, try to do something to remove it from the last post on the page.

    Hope that helped!

  5. Thank you for explaining that. ^_^ Can you point me to a source where I can learn how to assign values to a div section?

  6. Yes, it is especially very useful on archive pages or when you are showing full posts on the home page since the page becomes too long to scroll back up.

  7. I’m not sure if there is an exact guide on this, but here is a quick and dirty method that I just came up with:

    Inside index.php (or whatever file you’re doing this in) of your theme, add this near the top of the file.

    <?php
    $p_id = 0; // post-id
    ?>

    Then, under

    <?php while (have_posts()) : the_post(); ?>

    add this:

    <?php $p_id++; ?>

    It will increase the $p_id for each post to display.

    Then add this to make a link wherever you want it, inside of the loop.

    <a href=”#<?php echo $p_id + 1; ?>

  8. Oh. I forgot to mention:

    Change the line that looks something like:
    <div <?php post_class() ?> id=”post-<?php the_ID(); ?>”>

    to

    <div <?php post_class() ?> id=”<?php echo $p_id; ?>”>

  9. Wow. Thanks. I’ll try that.

    And by the loop you mean the one used by wordpress theme file right? (I am a total newbie) 😐

  10. Yeah. That’s it.

    It’s the stuff that looks a bit like:

  11. Whoops! Forgot to escape some brackets.

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <?php endwhile; else: ?>
    <p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
    <?php endif; ?>

  12. I tried… screwed it up. I’ll wait and do it tomorrow morning with wordpress codex opened in the sidebar.

  13. My theme has more complex things. Maybe that’s why it didn’t work.

    Anyways, I will be switching themes soon enough. So, I’ll wait for that. Thanks for the help!

  14. Just remember, you have to remove the existsing ID of the post, so anything using that will stop working.

  15. I meant to leave that reply on another comment. Sorry.

  16. mytheory says:

    is this tips can be done in blogspot platform?

  17. Helmi Asyraf (admin) says:

    I’m not sure this tutorial will work out well for blogspot platform.

    However, I found this great tutorial for blogspot which can be handy for you.

    http://www.cooltricksntips.com/2009/07/add-back-to-top-and-go-down-links-to.html

  18. Blogspot is pure HTML oriented I suppose. So, Helmi’s link to tutorial is the only solution.

    Unless you want to do it via javascript which will be more complex.

  19. Ricky says:

    I prefer to use above code in my footer.php file with float:right so people can click on it to scroll up. Usually my posts are not that long so I don’t use it.

  20. Helmi Asyraf (admin) says:

    Good to see you over here, Rick.

    Although your post nit that long, personally I think it would be great if you can put it in your index page which is pretty long.

    So, it would be easier for your readers to go back to your latest post section which is at the top after they have browsed through the page.

    What do you think?

  21. Ricky says:

    Yes it is a good option. Thanx for the suggestion. I usually don’t use “Read more” or excerpt on my home page as I’ve a blog on technology and blogging (normal reader doesn’t like to comment) so it tends to be a long page. Are you a designer as well?

  22. mytheory says:

    Thanks for the info you give me Helmi.. I will try it if i have some time… 🙂

  23. Cool tip. I usally have that problem, whe I read long articles. If I can’t find what I am looking for I just leave the site and stop reading the post. So, I think this feature would be very useful to stop anoying readers.

  24. Kushal Chap says:

    This is definetly a good idea. But why don’t you have this in this blog ???

  25. Mike says:

    Thats a good tip. We might want to consider as bloggers if our post is so long that it gets very boring is to break it up in a two or three part series.

  26. Kushal Chap says:

    Why don’t you use wordpress 🙂

  27. Kushal Chap says:

    In internet I realized that you should keep your post short and crisp because most people will skim.

  28. Mike says:

    yes if what your are saying is very long maybe you need to consider a video to keep it more interesting. Few people now and days are readers especially if they browse the web alot. Chances are they are in the younger generation and have less patience for long text

  29. Mike says:

    yeah i dont recommend blogspot. Only for beginners and even then there is nor reason to start on a platform that you cannot grow with

  30. AhmadiKatu says:

    thanks for the info…really helpful.

Leave a Reply

Your email address will not be published. Required fields are marked *