静态页面锚点导航异常求助：section标签被滚动遮挡

Hey there! I see the issue you're facing—when you jump to a section using anchor links, the top of the section gets hidden under your fixed header. Let's break down why this happens and fix it with a couple of straightforward solutions.

Why This Happens #

Your .app-header is set to position: fixed, which means it stays stuck to the top of the viewport and doesn't take up space in the normal document flow. When the browser scrolls to an anchor, it aligns the top of the target element with the top of the viewport—so your header ends up covering that top part of the section.

Solution 1: CSS scroll-margin-top (Simplest & Modern) #

This is the cleanest fix, supported by all modern browsers. We'll add a top margin to the scroll position of your target sections, equal to the height of your header. Looking at your code, your header matches the padding-top: 80px on main, so we'll use that value.

Add this to your CSS:

/* Apply to all elements you're linking to via ID */
section[id], .container[id] {
  scroll-margin-top: 80px; /* Matches the height of your fixed header */
}

This tells the browser to stop scrolling 80px above the top of the target element, so the section's content isn't hidden under the header.

Solution 2: Padding + Negative Margin (For Older Browser Support) #

If you need to support older browsers that don't recognize scroll-margin-top, use this trick:

section[id], .container[id] {
  padding-top: 80px; /* Push content down past the header */
  margin-top: -80px; /* Pull the element's top position back up */
}

This works because the padding moves the section's content down, while the negative margin keeps the anchor point in the correct place in the document flow. Note: If your section has a background color, the padding area will also show that color—adjust if needed.

Solution 3: JavaScript (For Custom Control) #

If you want more control (like smooth scrolling or closing the offcanvas menu after clicking a link), use this script:

// Handle all anchor link clicks
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    
    const targetId = this.getAttribute('href');
    if (targetId === '#') return;
    
    const targetElement = document.querySelector(targetId);
    if (!targetElement) return;
    
    // Calculate scroll position: target top minus header height
    const headerHeight = document.querySelector('.app-header').offsetHeight;
    const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight;
    
    // Scroll to the position (add behavior: 'smooth' for smooth scrolling)
    window.scrollTo({
      top: targetPosition,
      behavior: 'smooth'
    });
    
    // Close the offcanvas menu if it's open
    const offcanvas = document.getElementById('offcanvas');
    if (offcanvas.classList.contains('open')) {
      offcanvas.classList.remove('open');
    }
  });
});

Also, quick note: Your close button event listener has a small bug—you're using event.preventDefault() but haven't passed event as a parameter. Fix it like this:

var closeBtn = document.getElementById('close-btn');
closeBtn.addEventListener('click', function(event) { // Add "event" here
  var asideObject = document.getElementById('offcanvas');
  asideObject.classList.remove('open');
  event.preventDefault();
})

Any of these solutions should fix the anchor scrolling issue for you. Pick the one that fits your browser support needs!

内容的提问来源于stack exchange，提问作者Soujanya J