Html 更改div中位置的链接

我的页面由两个相邻的div组成

假设左边的div是一本有不同章节的书

我希望我在右边div中的链接移动div中的内容，使单击的章节位于顶部（基本上向下滚动到该章节）

也许有一个简单的答案我不知道

任何帮助都会很好。

试试这个：

<div id="text">
    <h1 id="chapterone">Chapter one</h1>
    <p>The text of chapter 1</p>
    <h1 id="chaptertwo">Chapter two</h1>
    <p>The text of chapter 2</p>
    <h1 id="chapterthree">Chapter three</h1>
    <p>The text of chapter 3</p>
</div>
<div id="links">
    <a href="#chapterone">Chapter one</a>
    <a href="#chaptertwo">Chapter two</a>
    <a href="#chapterthree">Chapter three</a>
</div>

第一章
第一章的案文

第二章
第二章的案文

第三章
第三章的案文

如果您使用iFrame，请查看以下内容：

<div id="text">
    <h1 id="chapterone">Chapter one</h1>
    <p>The text of chapter 1</p>
    <h1 id="chaptertwo">Chapter two</h1>
    <p>The text of chapter 2</p>
    <h1 id="chapterthree">Chapter three</h1>
    <p>The text of chapter 3</p>
</div>
<div id="links">
    <a href="#chapterone">Chapter one</a>
    <a href="#chaptertwo">Chapter two</a>
    <a href="#chapterthree">Chapter three</a>
</div>

第一章
第一章的案文

第二章
第二章的案文

第三章
第三章的案文

---

如果您使用iFrame，请查看一下

实现这一点的最简单方法是使用href。这仅在您使用HTML构建“书籍”时有效，而不是图像、PDF或其他内容

为每个章节的标题提供一个唯一的id，如“ch1”、“c2”等

然后设置第1章的href链接

<div id="left">
    <h1 id="ch1">
    <h2 id="ch2">
    #etc
 </div>
 <div id="right">
    <a href="#ch1">Chapter 1</a>
    <a href = "#ch2">Chapter 2</a>
    #etc
 </div>

#等
#等

请注意，这仅在“book”是HTML时有效。如果它是iframed in或是图像，请查看jQuery插件Scrollto，它将允许您为要滚动到的每个元素设置滚动高度（以像素为单位）

---

实现这一点的最简单方法是使用href。这只有在您使用HTML构建“书籍”时才有效，而且它不是图像、PDF或诸如此类的内容

为每个章节的标题提供一个唯一的id，如“ch1”、“c2”等

然后设置第1章的href链接

<div id="left">
    <h1 id="ch1">
    <h2 id="ch2">
    #etc
 </div>
 <div id="right">
    <a href="#ch1">Chapter 1</a>
    <a href = "#ch2">Chapter 2</a>
    #etc
 </div>

#等
#等

请注意，这仅在“book”是HTML时有效。如果它是iframed in或是图像，请查看jQuery插件Scrollto，它将允许您为要滚动到的每个元素设置滚动高度（以像素为单位）

---

您需要使用

href

并使其正常工作。章节标题的

href

和

id

应相同。这样它将导航到特定标题

<div> <!-- for links-->
<a href="#firstChapter">FirstChapter </a>
<a href="#secondChapter">Second Chapter </a>
<a href="#lastChapter">Last Chapter </a>
</div>
<div> <!-- for Chapters -->
<h1 id="firstChapter"> Chapter 1</h1>
<p>Content of chapter   </p>
<h1 id="secondChapter"> Chapter 2</h1>
<p>Content of chapter   </p>
<h1 id="lastChapter"> Chapter 10</h1>
<p>Content of chapter   </p>
</div>

第一章
第章内容

第二章
第章内容

第十章
第章内容

您需要使用

href

并使其正常工作。

href

和章节标题的

id

应该相同。这样它将导航到特定标题

<div> <!-- for links-->
<a href="#firstChapter">FirstChapter </a>
<a href="#secondChapter">Second Chapter </a>
<a href="#lastChapter">Last Chapter </a>
</div>
<div> <!-- for Chapters -->
<h1 id="firstChapter"> Chapter 1</h1>
<p>Content of chapter   </p>
<h1 id="secondChapter"> Chapter 2</h1>
<p>Content of chapter   </p>
<h1 id="lastChapter"> Chapter 10</h1>
<p>Content of chapter   </p>
</div>

第一章
第章内容

第二章
第章内容

第十章
第章内容

你必须展示你迄今为止所做的工作，看看如何处理这些类型的问题。所以不要属于这一类。只是想快速回答，所以没有必要。它在我的问题中清楚地说明了我想要什么，所以了解html/css的人可以在30秒内回答。但是没有代码，我们就可以无法看到您尝试了什么，然后我们可能会回答您已经尝试过的问题。也许您的代码中有一些东西，然后我们就不知道了。我通常会添加代码，这是我的其他问题之一（关于XML）这是一个非常详细的问题，花费了大量的精力和代码片段，但没有得到回答。B但我知道下一次：）你必须展示你迄今为止已经尝试过的工作，看看有大量的工作在处理这类问题。所以不要属于这一类。我只是想要一个快速的答案，所以我觉得没有必要。在我的问题中，它清楚地说明了我想要什么，所以了解html/css的人可以在30秒内回答。但是如果没有代码，我们将无法看到您尝试了什么，然后我们可能会回答您已经尝试过的问题。我通常会添加代码，我的另一个问题（关于XML）是一个非常详细的问题，花费了大量精力和代码片段，但没有得到回答。但我知道下次：）@BigJayMalcolm高兴，记得打勾。是的，我只是在等2分钟，直到我能：）@BigJayMalcolm高兴，记得打勾。是的，只是在等2分钟，直到我能：）