如何通过href链接到页面内指定id的目标元素（多标签页场景）

The issue with the regular anchor link is that inactive tabs are hidden from the page layout (usually via display: none), so the browser can’t calculate the position of #TARGET until Tab3 is visible. Here’s how to fix it with JavaScript:

Step 1: Update the TEST Link #

First, give your TEST link an ID so we can target it easily:

<a href="#TARGET" id="test-link">TEST</a>

Step 2: Add JavaScript to Handle the Click #

We’ll do two things when the link is clicked: activate Tab3 (make it visible) then scroll directly to the #TARGET element.

Option 1: Using the :target CSS Mechanism #

If your tabs rely on the :target pseudo-class to show active content (like your example code), use this script:

document.getElementById('test-link').addEventListener('click', function(e) {
  // Stop the default anchor jump behavior
  e.preventDefault();
  
  // Switch to Tab3 by updating the URL hash
  window.location.hash = 'tab3';
  
  // Wait a tiny moment for the tab to render (adjust timeout if you have transitions)
  setTimeout(() => {
    const targetElement = document.getElementById('TARGET');
    if (targetElement) {
      // Scroll the target into view with optional smooth animation
      targetElement.scrollIntoView({
        behavior: 'smooth',
        block: 'start' // Aligns top of target with top of viewport
      });
    }
  }, 100);
});

Option 2: Using an "Active" Class (No URL Hash Change) #

If you prefer to control tabs with an .active class instead of modifying the URL, use this approach:

First, update your CSS to use the active class:

.tabs section {
  display: none;
}
.tabs section.active {
  display: block;
}

Then add this JavaScript:

document.getElementById('test-link').addEventListener('click', function(e) {
  e.preventDefault();
  
  // Hide all inactive tabs
  document.querySelectorAll('.tabs section').forEach(tab => {
    tab.classList.remove('active');
  });
  
  // Show Tab3
  const tab3 = document.getElementById('tab3');
  tab3.classList.add('active');
  
  // Scroll to the target immediately (no timeout needed here)
  const targetElement = document.getElementById('TARGET');
  if (targetElement) {
    targetElement.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  }
});

Key Notes: #

• Timeout Adjustment: If your tabs have CSS transitions (like fade-in), increase the setTimeout value (e.g., 300ms) to wait for the transition to finish before scrolling.
• Scroll Position Control: Change block: 'start' to block: 'center' if you want the target element centered in the viewport instead of aligned to the top.
• Fixed Headers: If you have a fixed navigation bar, subtract its height from the scroll position using window.scrollBy(0, -headerHeight) right after calling scrollIntoView.

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