|
In this article, we will see how to Offset an anchor to adjust for a fixed header on a web page By using different approaches.
When we build websites, it’s common to use fixed headers that stay at the top of the page even if the user scrolls the page. However, this can cause issues with anchor links, which are used to quickly jump to a specific section of a page.
To solve this problem, we can use offsetting to adjust the position of the anchor tag. The offset value is essentially the height of the fixed header, which is subtracted from the target position of the anchor. This ensures that the anchor is positioned correctly, even when the fixed header is present on the top.
For understanding how it will happen let’s see one example, if the fixed header is 50 pixels tall and the target position of the anchor is 100 pixels from the top of the page, the offset value would be 50 pixels. This means that the anchor will jump to a position i.e., 100-50=50 pixels from the top of the page.
Let’s see how to Perform this task by using different approaches:
Approach 1: JavaScript ApproachIt is commonly used for offsetting an anchor to adjust for the fixed header. This is one of the most common and flexible approaches for offsetting an anchor. Using JavaScript, we can calculate the height of the fixed header and subtract it from the target position of the anchor, ensuring that the anchor is positioned correctly.
Example: Let’s see an example of how to use this approach
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<style>
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background-color: lightgray;
}
.secone {
height: 150vh;
}
.sectwo {
height: 150vh;
}
main {
padding-top: 60px;
}
p {
font-size: 23px;
}
</style>
<header>
<h1>Fixed Header</h1>
</header>
<main>
<div class="secone">
<h2 id="section1">Section 1</h2>
<a href="#section2">Go to Section 2</a>
<h1>
GeeksforGeeks: Computer Science
Education Portal
</h1>
<br>
</div>
<div class="sectwo">
<h2 id="section2">Section 2</h2>
<a href="#section1">Go to Section 1</a>
<h2>GeeksforGeeks: Online E-Leaning Platform</h2>
</div>
<a href="#section1">Go to Section 1</a> |
<a href="#section2">Go to Section 2</a>
</main>
<script>
// Get the header element
let header = document.querySelector('header');
// Get the height of the header
let headerHeight = header.offsetHeight;
document.querySelectorAll('a[href^="#"]')
.forEach(function (anchor) {
anchor.addEventListener('click',
function (event) {
event.preventDefault();
// Get the target element that
// the anchor link points to
let target = document.querySelector(
this.getAttribute('href')
);
let targetPosition = target
.getBoundingClientRect().top - headerHeight;
window.scrollTo({
top: targetPosition + window.pageYOffset,
behavior: 'smooth'
});
});
});
</script>
</body>
</html>
Output:
Approach 2: Offsetting an anchorAnother way of Offsetting an anchor is to adjust for fixed header Adjusting CSS Property. We can add a fixed header to our page and set the top padding on the body equal to the height of the header. This will create space for the header and prevent it from obscuring the content when we click on an anchor link.
Example: In the below code, we are going to Offset an anchor to adjust for a fixed header by using CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>CSS Approach</title>
<style>
header {
position: fixed;
top: 0;
font-size: 30px;
left: 0;
right: 0;
height: 60px;
background-color: #333;
color: #fff;
}
.secone {
height: 150vh;
padding-top: 60px;
}
.sectwo {
height: 150vh;
padding-top: 60px;
}
.secthree {
height: 150vh;
padding-top: 60px;
}
p {
font-size: 23px;
}
</style>
</head>
<body>
<header>Header</header>
<section class="secone" id="section1">
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
<h3>Section 1</h3>
<h1> GeeksforGeeks: Computer
Science Education Portal </h1>
<br>
</section>
<section class="sectwo" id="section2">
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
<h3>Section 2</h3>
<h1> GeeksforGeeks : Learn Online</h1>
</section>
<section class="secthree" id="section3">
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
<h3>Section 3</h3>
<h1> Education and Awareness</h1>
</section>
</body>
</html>
Output:
|
