Question

很抱歉，如果这个问题已经得到解答，但我找不到该帖子。

我创建的博客文章太长了（35,000字），并希望为读者创造更好的体验。

我正在试图弄清楚如何编写仅在博客帖子中显示的锚链接菜单，并与用户一起在屏幕上下滑动，因此如果他们想要来回跳跃，他们可以无需向上滚动并手动向下翻页。

这可能，如果是这样，你可以指向一个页面或帖子，告诉我如何编码吗？

感谢您的帮助。

Answer 1

请检查这是否是您想要的。 An example on W3C School

如果您的意思是，您希望章节菜单始终是一个修复位置，以便用户方便地单击它。试试这个。

＆＃13;

.container{
  display: flex;
}
.menu{
  position: -webkit-sticky;
  position: sticky;
  top: 50px;
  margin-left: 40px;
}
i{
  display: block;
}

＆＃13;

<!DOCTYPE html>
<html>
<body>

<div class="container">

<div>
<h2 id="C1">Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C2">Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C3">Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</div>

<div>
  <div class="menu">
    <ul>
      <i><a href="#C1">Jump to Chapter 1</a></i>
      <i><a href="#C2">Jump to Chapter 2</a></i>
      <i><a href="#C3">Jump to Chapter 3</a></i>
      <i><a href="#C4">Jump to Chapter 4</a></i>
    </ul>
  </div>
</div>

</div>

</body>
</html>

＆＃13;

创建滑动锚链接菜单

1 个答案: