HTML Anchor Links: Jump to Page Sections Tutorial

INTRODUCTION

The HTML Anchor link element can be used to create links to specific section of webpage. You can create link to a section either on same page or different page. This allows readers to quickly jump to different sections.

It is generally used for "Back to Top" Buttons, jumping to specific answers in a list of Frequently Asked Questions, creating navigation menus to scroll to sections of webpage among others.

Create Anchor link to Section on Same Webpage

The HTML Anchor link element can be used to create links to specific section of webpage. You can create link to a section either on same page or different page. This allows readers to quickly jump to different sections.

1.Basic Concept - Anchor links use the id attribute in HTML to mark a spot on the page, and a <a> tag with a href pointing to that ID.

2.Define the Target Section - First, add an id attribute to the element you want to jump to.

<h2 id="contact">Contact Us</h2>
<p>Here's how you can reach us...</p>

3.Create the Anchor Link - Now link to that section using a # followed by the id value: Clicking this link will scroll the page to the h2 with id="contact".

<a href="#contact">Go to Contact Section</a>

Create Anchor link to Section On different Webpage

To create an anchor link to section on different webpage, all the above process is same. You need to add an id attribute to the element you want to jump to which is on different webpage. But the anchor link should contain the complete URL (absolute URL) followed by the id value used with #.

For example, if the anchor link is on different page, and you want to link to the contact us section on the www.example.com/feedback page then include the complete URL as shown below.

<a href="www.example.com/feedback#contact">Go to Contact Section</a>

Scroll Smoothly

When a user clicks on an anchor link, the browser will Instantly jump to the target section. There will be no animation—it's an abrupt transition.

To avoid this, you can use the CSS scroll-behavior property with value set to smooth. When you include the CSS rule, any time a user clicks an anchor link, the page scrolls smoothly to the target section. Instead of jumping instantly, the scroll is animated—creating a more polished and user-friendly experience.

html {
  scroll-behavior: smooth;
}

Frequently Asked Questions (FAQ)

html {
  scroll-behavior: smooth;
}