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

Question

我正在尝试使用书签链接为我的 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....

以此类推，直到我到达第七个也是最后一个字幕。

如果有人能帮我解决这个问题，我将不胜感激！

Answer 1

有两件事，第一： 为了看到效果，你的文本需要超过浏览器窗口的高度，这样你才能看到它在移动，你的代码看起来很好，所以它应该可以工作。只需添加虚拟内容并查看。你可以从这里获取虚拟内容 https://www.lipsum.com/

第二次当浏览器滚动到一个 id 时，它滚动到那个 id 没有留下顶部边距，这会导致糟糕的 UX 有时，要解决这个问题，只需将顶部填充添加到您的 <h2>。喜欢

  h2{
    padding-top:100px;
   }

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

相应地调整填充。