Anchor Link Jump is an exciting technique that will provide users with a more friendly experience. We will talk about the Anchor Link Jump in this article and how you can create a jump link in your webpage to navigate the users to a specific part of the page by clicking on the simple text or heading. You can use this technique to make a Table of Content in your article. As all, we know we can not create a Table of Content in blogger directly but you can create it by adding some lines of code in your blogger theme the truth is that this is hectic for the majority of the users. So, for those users, this anchor jump link will help to jump on the specific part of the page that which user wants to read.
Main Topics of the Article:
- What is an Anchor Tag
- How to Create a Jump Link
- How to Add CSS to Jump Link
Anchor Tag:
An HTML element known as an anchor tag establishes a link to a destination URL. The link can wrap around text, pictures, or buttons when it is done properly, allowing users to interact with it and go to the link's destination. It is recommended practice to give information regarding the link's target, either through clear anchor text or through the use of an illustrative image. Visitors to the website will know what to anticipate, and search engine crawlers will be able to discern the relationship between the two URLs.
Anchor Tag Example:
The href attribute, which identifies the URL to be linked to, is necessary for an anchor tag. Although not necessary, additional features can make the link behave and look better.
My Site
Attributes and Purpose:
| Attribute | Purpose |
|---|---|
| href | Specify the link's target URL |
| name | Link to an anchor mark within the page |
| target | Specify how the target document should be opened, e.g. in a new tab |
| title | Provide text that will be displayed when the user hovers over a link |
| rel | Specifies the relationship between the source and the target document |
How to Create a Jump Link
There are just two steps to create a jump link for the same webpage to a specific part of the page. If you are using WordPress then you can use many ways to create jump links because Worpress has a lot of plugins, page builders, and functionality if you want to use this in WordPress so you can use it but if you are using Google Blogger this is for you.
Step 1:
In step 1 you just have to give the id to the text or heading where you want to Jump, You can see the example below:
This is the HTML view of the post and the text "landing area" will be our destination where we want to jump through a click. Okay so now we add a tiny code around the text "landing area". we add an anchor tag before and after our target text and will give the id to the anchor tag the id name should be unique and case-sensitive. so, the code example is given below:
the landing area
Step 2:
In step 2 now we make some changes to the text that we want to make clickable and jump to our destination so what we do now is we just make a little bit of change in our code.
As you can see in the above image the text is highlighted which we want to make clickable for the jump so what we do is we give an id to an anchor text where we want to land so, and we use that id "trick" in this anchor text with the attribute 'href'.
This is the code example:
Click here to jump
That's it so now you can see that if you click on the text "Click here to jump" so you will jump to the text "Landing area". but I want to add a little thing to it Although this link jump is working properly it will look good if it works smoothly through a smooth scroll so for that we can add a CSS code in it for the smooth scroll.
This is the CSS code:
html{scroll-behavior: smooth;}
