使用 HTML 锚链接显示隐藏的 div 并滚动到所需的锚位置

Question

我正在尝试创建一个索引页面，并希望拥有指向隐藏 div 内的锚点的链接。

单击锚链接将触发锚所在的 div 变为可见并将页面滚动到锚位置。

我尝试了一些方法，但都失败了。任何帮助将不胜感激。

<div>
  <p>Link</p>
  <a href="#content1">Content 1</a><a href="#content2">Content 2</a><a href="#content3">Content 3</a><a href="#content4">Content 4</a>
</div>
<div class="inter">Some intermedary content with a large bottom margin to demonstrate scroll</div>
<div>
  <div class="hiddenContent">
    <div id="content1">I am content 1</div>
    <div id="content2">I am content 2</div>
    <div id="content3">I am content 3 
    <a id="content4" >Inner anchor within content 3 div. Link should scroll here but also show the other content within content 3.</a>
    </div>
  </div>

Answer 1

这可以通过 CSS 轻松解决。您需要进行调整以满足您的需求，因为您没有向我们提供任何可使用的代码。

使用:target pesuo-class 选择器选择作为链接目标的项目

.hiddenContent>div, .hiddenContent > [name=content4] {
  display: none;
}

.hiddenContent>div:target {
  display: block;
}

.inter {
  margin-bottom: 100vh;
}

<div>
  <p>Link</p>
  <a href="#content1">Content 1</a><a href="#content2">Content 2</a><a href="#content3">Content 3</a><a href="#content4">Content 4</a>
</div>
<div class="inter">Some intermedary content with a large bottom margin to demonstrate scroll</div>
<div>
  <div class="hiddenContent">
    <div id="content1">I am content 1</div>
    <div id="content2">I am content 2</div>
    <div id="content3">I am content 3</div>
    <a name="content4" >
        <div>Some content in a named anchor</div>
    </a>
  </div>