HTML书签链接在Wordpress上不起作用

问题描述

我正在尝试使用书签链接为我的WordPress博客创建目录。 我一直在阅读，我知道该过程有两个步骤 首先，我必须在文本中为要链接的位置分配一个ID，例如：

<h2 id="C4">Chapter 4</h2>

然后，在索引部分，我必须创建实际的链接，如下所示：

<a href="#C4">Jump to Chapter 4</a>

不过，我在网上阅读的文章中提到的万无一失的方法如下：

<h2 id="C1"></h2>
<h2>Chapter 1</h2>

这是因为，我引用“您可能决定不使用文本，因为通常当您跳到网站上的某个位置时，工具栏或顶部的其他内容可能会掩盖您希望访问者看到的实际开始位置看到。”

我尝试了两种方式，但均无济于事，因为一旦我尝试了博客文章预览中的链接，每当我单击它们时，它们都会带我到文本中的随机位置。

以下是我的代码的详细信息：

Index
<a href="#C1">What is Habit Tracking?</a>
<a href="#C2">How Does Habit Tracking Work?</a>
<a href="#C3">Which Habits Should You Track?</a>
<a href="#C4">Which Habit Tracking Tool Should You Use?</a>
<a href="#C5">A Simple Google Sheets Habit Tracker</a>
<a href="#C6">Does Habit Tracking Work?</a>
<a href="#C7">The Habit of Tracking Habits</a>

&nbsp;
<h2 id="C1"></h2>
<h2>What is Habit Tracking?</h2>
Text... 

&nbsp;
<h2 id="C2"></h2>
<h2>How Does Habit Tracking Work?</h2>
Text...

&nbsp;
<h2 id="C3"></h2>
<h2>Which Habits Should You Track?</h2>
Text....

依次类推，直到我到达第七和最后一个字幕为止。

请，如果有人可以帮助我解决这个问题，我将不胜感激！

解决方法

有两件事，第一件事： 为了看到效果，您需要使文本大于浏览器窗口的高度，以便可以看到文本在移动，代码看起来还不错，所以应该可以工作。只需添加虚拟内容即可查看。你可以从这里获得虚拟内容 https://www.lipsum.com/

第二，当浏览器滚动到一个id时，它将滚动到该id，不留任何上边距，这会导致不良的UX有时，要解决此问题，只需在<h2>上添加顶部填充即可。喜欢

  h2{
    padding-top:100px;
   }

它应该看起来不错。我在这里使用您的代码创建的。 https://codepen.io/jiteshdhamaiya/pen/vYGGrZg

相应地调整填充。