Jump to Content Anywhere Inside a Page

This guide is mostly for beginners who have seen such articles with huge contents and multiple heading but when you click on the list of Headings automatically you will be jumped to desired heading’s data. After posting such beautiful widgets for Blogger I have decided now I should change the topic, so now in this Post I will tell you how we can easily jump any topic in the list to its paragraph. For example you can click below sample, you will understand what I am going to guide you.

Jump to Content Anywhere Inside a Page

 

Click on any of the Following Examples

Image for Example-1

 

This is the first example now click below on Back to Top Button

——————————————

Image for Example-2

 

This is the first example now click below on Back to Top Button

——————————————

Image for Example-3

 

This is the first example now click below on Back to Top Button

——————————————

Recommendations :-

Hope you have understood for what I have create this post now below I will guide how you can you do this for you own contents.

How to Create Jump to Other Contents in Same Page

What you have to do its very simple, for creating Jump to other contents anywhere in a page you have to assign a unique ID for content whatever it is image or text. You just name it. But this all work you have to do in EDIT HTML.

For Example
Above I have made three examples and all are jump to three different destinations.
I have made above Example-1 and its sending me to Image for Example-1 what is behind it
Image for Example-1 = <p id=”imagex1”>Image for Exaple-1</p>
And
Example-1 = <a href=”#imagex1”>Example-1</a>
When you click on the Example-1 it will jump you as per id which we assigned and take you to Image for Example-1

 

Now back to Top
For back to top you the to assign id for the Topics mean where is your list
For example
Above we have Example-1 what we have to do with Example-1, we have to assign a unique id for back to top inside any of the top word we will use here Example-1
Above we have just use Example-1 for Jump to Image for Example-1 now we will use same Example-1 for back to Top
Example-1 = <div id=”backtotop”><a href=”#imagex1”>Example-1</a><div>
and
back to Top = <a href=”#backtotop”>Back To Top</a>

Hope You have understand the above tricks now we will discuss about another method about Jump to Image

How you insert destination for jump as Image you have to use the following method
Image = <div id=’imag'<img src=’http://img2.blogblog.com/img/b36-rounded.png’></img></div>
If you want the image as button back to top the use the following code
Image = <div id=’imag’><a href=”#backtotop”><img src=’http://img2.blogblog.com/img/b36-rounded.png’></img></a></div>

Hope you have understand my this above tutorial for any further assistance you can ask by replying in this post. For more subscribe our daily updates of follow our social media networks


Share this post