0

我想制作一个网站（全部在一个页面上）。它在页面的顶部和底部都有箭头。我需要使用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>
4

1 回答 1

0

首先是几件事.. 根据 HTML 规范，您不能将 ..放在div里面a。尝试将它们翻转过来，或者将a标签的 CSS设置display为block. 此外，您不能在多个元素上使用相同的 ID（对于您的sectionID，我建议使用一个类）。

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

<div class="page" id="page-PAGENUMBER">
    <!-- your page's code here -->
</div>

wherePAGENUMBER是一个唯一递增的数字，第一页从 0 开始。

将您的两个链接更改为如下所示：

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

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

<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>

然后像这样在你的页面中添加一些 Javascript 代码：

<script>
    // Stores the current page
    var current_page = 0;

    // On previous page click
    $("#ntop").click(function() {
        current_page--; // Decrement current page
        document.location.hash = "page-" + current_page; // Update URL hash
    });

    // On next page click
    $("#nbot").click(function() {
        current_page++; // Increment current page
        document.location.hash = "page-" + current_page; // Update URL hash
    });
</script>

此代码假定您使用的是jQuery

希望这可以帮助！

于 2013-11-03T05:16:49.787 回答