Difficulty: Beginner
Bookmark links (also called fragment links or hash links) allow you to link to a specific section within a page rather than to the top of a new page. They work by targeting an element's id attribute using a fragment identifier -- the # symbol followed by the id value. When a user clicks a bookmark link, the browser scrolls to the element with the matching id on the current page.
The syntax is straightforward: set an id attribute on the target element (e.g., <section id="features">) and create a link with href="#features". You can also link to a specific section on a different page by combining the URL with a fragment, like href="/about#team". When the browser loads the about page, it will automatically scroll to the element with id="team". The id must be unique within the page -- having duplicate ids will cause unpredictable behavior.
Smooth scrolling enhances the user experience by animating the scroll to the target section instead of jumping instantly. The simplest way to enable this is with the CSS property scroll-behavior: smooth on the html element. This single line of CSS makes all anchor-based scrolling smooth throughout the page. For more control, you can use JavaScript's element.scrollIntoView({ behavior: 'smooth' }) method.
Skip navigation links are an important accessibility pattern. They are typically the first element in the page's HTML, allowing keyboard and screen reader users to skip past the header and navigation directly to the main content. Without skip links, keyboard users must Tab through every navigation link on every page before reaching the content. The skip link is usually visually hidden but becomes visible when it receives keyboard focus.
A common pattern is a table of contents at the top of a long article, with each heading linked to its corresponding section via bookmark links. This gives users an overview of the content and lets them jump directly to the section they are interested in. When implementing this, ensure each section heading has a unique id and consider adding a "Back to top" link at the end of each section for easy navigation.
<!-- Table of contents -->
<nav aria-label="Table of contents">
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
<!-- Target sections -->
<section id="introduction">
<h2>Introduction</h2>
<p>Welcome to our product...</p>
</section>
<section id="features">
<h2>Features</h2>
<p>Here are the key features...</p>
</section>
<section id="pricing">
<h2>Pricing</h2>
<p>Choose a plan...</p>
</section>
<section id="faq">
<h2>FAQ</h2>
<p>Common questions...</p>
</section>Each section has a unique id attribute. The links in the table of contents use # followed by the id to create bookmark links. Clicking any link scrolls the page to that section.
<style>
/* Enable smooth scrolling for the entire page */
html {
scroll-behavior: smooth;
}
/* Add scroll margin to account for fixed headers */
section[id] {
scroll-margin-top: 80px;
}
</style>
<header style="position: fixed; top: 0; height: 70px;">
<nav>
<a href="#about">About</a>
<a href="#work">Work</a>
<a href="#contact">Contact</a>
</nav>
</header>
<section id="about">
<h2>About</h2>
</section>scroll-behavior: smooth makes all hash link navigation animate smoothly. The scroll-margin-top property adds offset so the section heading is not hidden behind a fixed header. Without scroll-margin-top, the target element would scroll right to the top edge, potentially behind a fixed navbar.
<body>
<!-- Skip link: first element in body -->
<a href="#main-content" class="skip-link">
Skip to main content
</a>
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/services">Services</a>
<a href="/blog">Blog</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main id="main-content">
<h1>Page Content Starts Here</h1>
<p>...</p>
</main>
</body>
<style>
.skip-link {
position: absolute;
top: -100%;
left: 0;
padding: 8px 16px;
background: #000;
color: #fff;
z-index: 1000;
}
/* Visible when focused via keyboard */
.skip-link:focus {
top: 0;
}
</style>The skip link is positioned off-screen by default and only appears when a keyboard user tabs to it (the first focusable element). Clicking or pressing Enter jumps past the navigation directly to the main content. This is essential for accessibility compliance.
<!-- Back to top link -->
<a href="#" id="top">Back to Top</a>
<!-- Alternative with explicit top target -->
<a href="#top">Back to Top</a>
<!-- Link to a section on another page -->
<a href="/docs/api#authentication">
API Authentication Docs
</a>
<!-- Link to top of another page -->
<a href="/about">
About Page
</a>href='#' scrolls to the top of the current page. You can also link to a specific section on a different page by appending the fragment identifier to the URL. The browser loads the target page and then scrolls to the element with the matching id.
Fragment Identifiers, id Attribute, Smooth Scrolling, Skip Navigation, Hash Links