How to create an internal jump link in blogger posts

Sometimes you want to create a table of content to your post in such a way when you click on any content it will bring you to a specific part of the post, this is what is called the jump link.

For example, if you click on the link below it will bring you to the end of the post.

go to end

To do that we will use of the HTML anchor tag <a>, don't worry if you don't have any background in HTML just follow the steps one by one:

1- For example the text you want to click is "Go to end" or any other text, switch to HTML mode of your post editor and write the code instead of the text:

<a href="url#anchor1">go to end</a>


2- Change the text "go to end" and "anchor1" with any text you want, if the link will bring you to a specific part in another post change "url" with the external post url, otherwise delete it.

3- Go to the post part you want the clickable link will bring you to it and past the code:

<a id="anchor1"></a>

4- You can use any meaningful text other than "anchor1" to looks more professional.

5- You can customize the clickable text to look like a header like this:

 <a href="#anchor1"><h2>go to end</h2></a>

You can add more links in the same post, just change the text "anchor1" by another text. 

Now the link will work normaly, one last thing is to add the smooth scroll to your page so the link jump smoothly or with a time transition to its destination.

Add scroll smooth propertiy to your blog:

Scroll-behavior smooth property is new in CSS3, so you don't need any javascript code to do it, just past the code bellow in your theme.
Search for the tag: /b:skin and past this code above it.

*{
scroll-behavior: smooth !important;
}


That's all, if you face any problem let me know in the comments.

Post a Comment (0)
Previous Post Next Post