Wednesday, March 27, 2013

How to create link to scroll to a certain part of the post

How to create link to scroll to a certain part of the post I haven't found a viable solution (for Blogger) anywhere else. So I have invented it by myself. And it does not corrupt the post when you switch between Compose and HTML mode. You can easily create such links that link to a certain part of a post to elaborate on the topic, without leaving/refreshing the page.

Example Scenario:

You may have created a post like a question-answer one. And you want a contents at the top conataining only the questions and the answer is written below the contents. You want your questions to be clickable and when you click them you want to be scrolled to the answer.
  • What is your name?
  • Who are you?

What is your name?     <---- you want a link to scroll down here 

 I am Adnan Shameem.

Who are you?                            <---- and here as well

I am a graphics designer and a programer.

The HTML code of the above layout will be like this:


So what you can do is, create an anchor to set the position where to scroll down to. Edit the HTML of the post and add the code where you want your anchor to be placed (in our case the answer):

Note: replace [post_url] with the post's url/link to the post

The name="what" means that the anchor name is "what".
The main trick lies in href="[post_url]#". According to this page if you only use the usual anchor code (that is <a name="what"></a>), then when you go back to Compose mode it will be replaced by (<a href="" name="what"></a>) and in the post a weird url will appear. When you link the current page with only a # afterwards (href="[post_url]#"), nothing happens except the browser scrolls to the top of the page. It is like dummy link that does nothing. We specify href="..." part in order to stop blogger from automatically adding href="" to our code. This method is logical cannot be corrupt when you switch between Compose and HTML mode.

Now we can make our url point to anchor "what". All we have to do is create an url and place a hash (#) and then the anchor name. In the compose mode select the text that you want a link of and then create a link with the:

Replace [post_url] with the url of the post where the anchor is.

So the final code is:

(Replace [posturl] with link of the post you have created.)

See this tip in action:


Post a Comment

Random Posts


free counters

Add Us in Your Circles

  © Ink of life 2017 | Privacy Policy

ProBlogger Template by

Back to TOP