How to Create a Link to Jump to a Specific Part of a Page in HTML CSS

In this blog, we’ll see how we can add a Link To Jump to Different Parts of a page in HTML.

For CSS, I’ll be using a very widely used CSS library called Bootstrap. I’ll be using it to add simple CSS to my pages like margins, containers, and Navbars.

How can we achieve this task?

It is pretty simple to achieve this. Whenever you want to jump to a specific element on your page, just add that elements id relative to your current URL.

By default, if you just add the element’s id to the ‘href’ of your anchor tag, it will automatically add this relative to your current URL and take you to the element with that specific id.

Ex:

Consider you want to jump to this section in your Webpage:

<!-- Notice that I have given it a JumpTo id --!>
<div id="JumpTo1">    
<h2>1</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet ante nulla. Donec augue nibh, scelerisque et tincidunt nec
    </p>
</div>

Then your anchor tag should be something like this:

<a href="#JumpTo1">Go To The Paragraph</a>

For a better look at how this works you can see the CodePen link below and see how it works:

https://codepen.io/Dragonsa15/pen/xxwvNaY