锚点跳转至页面指定位置后上方内容消失的解决办法

Hey there! Let’s work through why your anchor links are making content above the target section disappear and unscrollable. This usually boils down to how your page’s scroll containers or CSS are configured—here are the most common fixes:

1. Check Your Scroll Container Setup #

If your target sections live inside a container with overflow: auto or overflow-y: scroll, but the content above is outside that container, jumping to the anchor will lock you inside the container’s scroll area (so you can’t scroll up to the content outside).

Fix:
Ensure all your content (including the parts above your target sections) is inside the same scrollable container. For example:

<!-- Bad setup: Content above is outside the scroll container -->
<div class="header-content">This content will disappear when jumping to sections</div>
<div class="scroll-container" style="height: 100vh; overflow-y: scroll;">
  <div id="section-01">Section 1 content...</div>
  <div id="section-02">Section 2 content...</div>
</div>

<!-- Good setup: All content is inside the same scroll container -->
<div class="full-page-scroll" style="height: 100vh; overflow-y: scroll;">
  <div class="header-content">This content stays accessible</div>
  <div id="section-01">Section 1 content...</div>
  <div id="section-02">Section 2 content...</div>
</div>

2. Avoid Unintended CSS/JS That Hides Content #

Sometimes, code might be hiding elements above the target when an anchor is activated. Check if you have any logic that does:

• Setting display: none on elements above the target when the anchor link is clicked
• Using visibility: hidden or opacity: 0 on those elements
• Removing elements from the DOM entirely via JavaScript

Fix:
Inspect your page with browser dev tools (F12) after clicking the anchor link. Look at the Elements tab to see if the content above is still present but hidden, or if it’s gone. If it’s hidden, track down the CSS/JS causing it and adjust accordingly.

3. Correct Anchor Target Positioning #

If your target section uses position: absolute or fixed without proper parent context, it might be pulled out of the normal document flow. This can make content above seem like it’s gone (even though it’s still there, just not in the same flow).

Fix:
Stick to position: relative (the default) for your target sections unless you have a specific reason for absolute/fixed positioning. If you must use absolute positioning, set its parent container to position: relative to keep the section within the document flow.

4. Test Without Smooth Scroll (If Enabled) #

If you’re using scroll-behavior: smooth in your CSS, browser inconsistencies can sometimes cause unexpected scrolling behavior. Try temporarily removing it to see if that fixes the issue.

Fix:
Remove this line from your CSS and test:

html {
  scroll-behavior: smooth;
}

If that works, you can keep smooth scroll but add a small JavaScript snippet to adjust the scroll position manually, ensuring content above remains accessible.

5. Use JavaScript to Control Scroll Position #

If none of the above fixes work, override the default anchor scroll behavior with JavaScript to ensure the entire page remains scrollable. Here’s a simple example:

// Prevent default anchor behavior and scroll manually
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);
    
    if (targetElement) {
      // Scroll to the target while keeping the entire page scrollable
      window.scrollTo({
        top: targetElement.offsetTop,
        behavior: 'smooth' // Optional: keep smooth scroll if desired
      });
    }
  });
});

This script ensures scrolling happens on the entire window, not just a container, so all content above the target stays accessible.

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