Offsetting an anchor to adjust for fixed header

Last Updated : 15 Mar, 2023

In this article, we will see how to Offset an anchor to adjust for a fixed header on a web page By using different-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 approach: It 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 
        var header = document.querySelector('header'); 
  
        // Get the height of the header 
        var 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 
                var target = document.querySelector( 
                    this.getAttribute('href') 
                ); 
                  
                var targetPosition = target 
                    .getBoundingClientRect().top - headerHeight; 
  
                window.scrollTo({ 
                    top: targetPosition + window.pageYOffset, 
                    behavior: 'smooth' 
                }); 
            }); 
        }); 
    </script> 
</body> 
  
</html> 

Output:

Approach 2: Offsetting an anchor: Another 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> 