使用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>