Question

我想建立一个网站（全部在一个页面上）。它在页面的顶部和底部有箭头。我需要使用position:fixed，以便箭头可以保持在同一个地方（我正在使用Smooth Scroll插件）。我希望箭头改变链接到上一篇文章（页面顶部的∧链接）和下一篇文章（页面底部的∨链接）相对于当前文章（链接转到文章）使用#articlename）

我目前的代码是

<body>
<a href="#h"><div id="ntop">&and;</div></a>
<a href="#a"><div id="nbot">&or;</div></a>

<div id="page"><div id="h"></div><div id="section">
<h1>Welcome to Localhost.</h1>
<p>Localhost is a site. On your computer!</p>
</div>
<div id="a"></div><div id="section">
<h1>About Us.</h1>
<p>We are a group that make websites.</p>
</div>
</div>
</body>

Answer 1

首先只是一些事情..根据HTML规范，你无法在div内放置a。尝试翻转它们，或设置{ {1}}标记的CSS a到display。此外，您不能在多个元素上使用相同的ID（对于您的block ID，我建议使用类。）

对于每个不同的“页面”，请使用以下代码：

section

其中<div class="page" id="page-PAGENUMBER">  </div>是唯一的递增数字，从第一页的0开始。

将您的两个链接更改为：

PAGENUMBER

使用这些更改，您可以将当前代码更新为：

<a id="ntop" href="javascript:void(0);" style="display:block;">&and;</a>
<a id="nbot" href="javascript:void(0);" style="display:block;">&or;</a>

然后在页面中添加一些Javascript代码：

<body>
<a id="ntop" href="javascript:void(0);" style="display:block;">&and;</a>
<a id="nbot" href="javascript:void(0);" style="display:block;">&or;</a>

<div class="page" id="page-0">
    <h1>Welcome to Localhost.</h1>
    <p>Localhost is a site. On your computer!</p>
</div>
<div class="page" id="page-1">
    <h1>About Us.</h1>
    <p>We are a group that make websites.</p>
</div>
</body>

此代码假定您使用的是jQuery

希望这有帮助！

更改页面上不同区域的链接

1 个答案: