Add a Fast Forward Button to Respect Reader’s Time

Respecting the time of the readers is a valuable blogging ethic. But when you write, you have to target the non-techie audience and explain every aspect in detail. For that you give some background information as introduction to bring the reader to the topic.

In practice, your regular readers and the tech savvy crowd need no introduction; they need the core matter alone. What if you could add a ‘jump to content’ or ‘fast forward’ button? You can see an example on this post (see image). Click the Fast Forward button above and see how it works. You like it? Let’s see how we can make for your site.

See where the Button is located, click the real one for a live demo

See where the Button is located, click the real one for a live demo

The link is actually a hash tag. I have included a NAME tag for the main content and clicking the Fast Forward link scrolls the page to the hash tag position.

An example: See the post on Casio Exilim Hacks. Actually the post need no introduction, yet it’s awkward to write just the hacks. The Fast Forward Button can be used to skip the initial blah-blah.

Making the Fast Forward Button

Code for the Button: Insert this in the post template, where you want the Button to appear. Preferably include it at the beginning somewhere near the title so that your fast-grabbing readers can make good use of it.

<a title=”Skip introduction and jump to the main content” href=”#fastforward”>Fast Forward >></a>

The above code can be inserted in the template so that you don’t have to paste them again and again

Specify the Main Content: Insert the following code where your main content starts. Pressing the Fast Forward button will take the reader to this point on the page.

<A NAME="fastforward"></A>

The above code has to be inserted to each post manually. 🙁 . To do that, edit the post in html view and copy-paste the code. You can keep this code in a text file for handy reference. Can some one write a plugin to do that by just clicking a button, the same way we insert the ‘more’ tag?

You can modify the title and the Anchor text in the first code to suit your site. The hash tags (here fastforward) have to be the same in both the first piece of code and second, else the sky will fall on your head, 🙂

Guess what, this code comes with free lifetime support! Just post your queries below and your issue will be addressed within 24 hours. Also tell me how you find this button useful.

Update: Create a Custom Quicktag and insert the name tag with the click of a button! No more copy pasting. Get the code for the FastForward Quicktag.

Hello, I am Arun Basil Lal. Thank you for reading!

I am a WordPress product developer and creator of Image Attributes Pro. I am passionate about solving problems and travelling the world.

Divi WordPress Theme - My Review

Divi WordPress Theme
Divi is a WordPress theme that web designers do not want you to know. It comes with a drag-and-drop theme builder. You can build beautiful looking unique websites without touching a line of code. Just choose from one of the many pre-made layouts, or pick elements and arrange them any way you like.

Divi is every WordPress developer's wet dream. Surprise your clients with neat responsive websites and have fun building them.

Divi comes from Elegant Themes. If you enjoy building websites, you *need* an Elegant Themes membership. 87 beautiful themes and 5 plugins for the cost of less than a candy-bar each!


Note: I am an avid user of Divi myself and this is a honest review. I wouldn't recommend something that I do not personally find amazing.

11 Comments.

  1. Quakeboy says:

    Amazing idea !
    I like it
    you are starting a new trend I should say, don’t be surprised if soon a lot of people follow this..

    • Arun says:

      Hey, thanks for that. I am waiting for that day when someone really starts using some of my ideas. Thanks for the heads up. Cheers

  2. TheAnand says:

    I used to do this with the anchor a tag with “name” sometime back….

    • Arun says:

      Anand, Thanks for the new bit. Cheers

      So instead if the div tags you can use

      <a name="fastforward" rel="nofollow"></a>

      for the same effect. i.e. instead of the second bit of code you can use this code.

  3. Seriously nice idea.
    Congrats.

  4. Nihar says:

    I have seen comments link which takes you to comments form section, but this is a new idea to me. thanks. I will think and may decide to implement on my blog.

    • Arun says:

      Well, I had been reading blogs for the last 4 years and I have wished to see something like this to catch up with all the blogs. I hope it saves some time of a well-tech-fed reader. Glad that you liked it.

  5. Lesbiche says:

    Nice site you have!

  6. Update: Finally, an easy way to insert a fast forward button is available here

Leave a Reply

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

*