Last Updated:
Jump to Content Anywhere Inside a Page

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.

Click on any of the Following Examples

Example-1  Example-2   Example-3   Go Direct to Tutorial.

Image for Example-1 

 
This is the first example now click below on Back to Top Button
Back to top 
——————————————
Image for Example-2
 
This is the first example now click below on Back to Top Button
Back to top 
——————————————
Image for Example-3
 
This is the first example now click below on Back to Top Button
Back to top 
——————————————

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

Comments