In this article, we will see how we can put a Link To scroll to a Specific section of a Page in HTML.

For CSS, I will be using a very extensively used CSS library which is Bootstrap. I will be using it to add easy CSS to my pages like margins, containers, and Nav bars.

How can we accomplish this task?

It is pretty easy to achieve this. Every time you want to jump to a specific aspect on your page, just add that elements id respective to your current URL.

By default, if you 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 particular id.

Ex:

Assume you want to scroll 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>

Now, your <a href=””> anchor tag should look like this:

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

For a good look at how this works you can see the CodePen website link given and see how it works:

Scroll to a Specific section of a Page