How to Block Website Anchor Links: A Complete Guide
Introduction
Anchor links are an essential part of web navigation, allowing users to jump directly to specific sections of a page. However, there are situations where you may want to block website anchor links — whether to prevent unwanted scrolling, stop external sites from deep-linking to your content, or simply control user experience more tightly. In this article, we'll explore practical methods to block website anchor links and explain when each approach makes sense.
What Are Anchor Links?
An anchor link (also called a jump link or fragment link) uses the symbol followed by an element's ID. For example:
<a href="#section2">Go to Section 2</a>When clicked, the browser scrolls to the element with id="section2". While useful, anchor links can be abused by scrapers or competitors who link directly to specific parts of your page, bypassing your intended navigation flow.
Why Block Website Anchor Links?
There are several legitimate reasons to block website anchor links:
- Prevent content scraping – Deep links make it easier for bots to extract specific sections.
- Control user journey – You may want visitors to follow a linear path.
- Avoid broken navigation – If IDs change frequently, old anchor links break.
- Reduce unwanted referrals – Some sites use anchor links to hijack traffic.
Method 1: JavaScript to Intercept Anchor Clicks
The most common way to block website anchor links is by intercepting click events:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
// Optionally scroll manually or do nothing
});
});
This stops the default jump behavior. You can then implement custom scrolling or block it entirely.
Method 2: Remove IDs from Target Elements
If you don't want any anchor links to work, simply remove id attributes from your HTML. Without an ID, #section has nowhere to go. This is a blunt but effective way to block website anchor links.
Method 3: Use CSS to Disable Scroll Behavior
You can set:
html {
scroll-behavior: auto;
}
But this only affects smooth scrolling, not blocking. For a stronger approach, combine with pointer-events: none on anchor elements — though this also disables other clicks.
Method 4: Server-Side Blocking via Referrer Check
If you want to block external sites from using anchor links to your page, check the Referer header. If the referrer is not your own domain, redirect or block the request. This is more advanced but useful for blocking website anchor links from competitors.
Method 5: Use a WordPress Plugin
If you're on WordPress, plugins like "Anchor Block" or custom code in functions.php can disable anchor links globally. For example:
add_action('wp_footer', function() {
?>
<script>
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => e.preventDefault());
});
</script>
<?php
});
Method 6: Block Anchor Links in Iframes
If your content is embedded in an iframe, you can use the sandbox attribute to restrict navigation:
<iframe src="yourpage.html" sandbox="allow-scripts"></iframe>
Without allow-top-navigation, anchor links won't scroll the parent page.
Potential Drawbacks
Blocking all anchor links can hurt usability. Users expect to jump to sections in long articles. Instead of a full block, consider:
- Allowing internal anchors but blocking external ones.
- Using JavaScript to scroll smoothly without changing the URL.
- Only blocking specific anchors (e.g., those with a certain class).
Best Practices for SEO
If you block website anchor links, ensure you don't break internal linking. Google uses anchor links for indexing and featured snippets. Blocking them entirely may reduce your SEO performance. Instead, use rel="nofollow" on external anchor links or redirect them.
Conclusion
Learning how to block website anchor links gives you more control over user experience and content protection. Whether you use JavaScript, CSS, server-side checks, or CMS plugins, choose a method that balances security with usability. Always test on multiple browsers and monitor SEO impact. For most sites, selective blocking is better than a blanket ban.
Related Reading
- How to Block Website Anchor Links Safely
- Anchor Link SEO Best Practices
- JavaScript Event Prevention Guide
Tags: #AnchorLinks #WebDevelopment #SEO #JavaScript #ContentProtection
Category: Web Security & SEO
