HTML - 链接到打开页面，然后锚定在该页面上

Question

我正在开发一个相当广泛的本地网站。它不在网络服务器上，我或多或少地受限于 HTML 和 JavaScript。

我在使用此语句调用的所有页面上都有一个侧面导航菜单：

<script type="text/javascript" src="menu/menu.js"></script>

menu.js 本质上是一个这样的链接列表：

document.write("<a href='page5.html#part1'>Part 1</a>");

在所有页面上都有一个粘性标题脚本，这使得链接到锚点很麻烦。如果您当前位于链接链接到的页面上并且链接链接到的锚点上方，则它可以正常工作。但是，如果您当前位于同一页面上的锚点下方，则会出现故障。它不会把你带到它应该去的地方。

可能还有另一种方法，但我觉得一个易于实施的解决方案是创建一个链接，首先在顶部打开页面，然后将您带到锚点。

我尝试使用此问题 ([Force page reload with html anchors (#) - HTML & JS) 中的@Qwerty 解决方案，但没有成功。我试过这个：

document.write("<a href='page5.html#part1' onclick='location.reload()'>Part 1</a>");

我猜它不起作用，因为它是本地的和/或因为从 JS 文件中读取的链接。

示例 为简单起见，假设网站上有 3 个页面，每个页面上有 3 个锚点。我希望这个外部 JS 菜单打开并在所有页面上工作。它有这些链接：

page1.html#part1
page1.html#part2
page1.html#part3

page2.html#part1
page2.html#part2
page2.html#part3

page3.html#part1
page3.html#part2
page3.html#part3

Answer 1

下面的代码段是为了便于参考，其中涉及的内容比代码段中的要多。如果您喜欢现场演示，请访问此PLUNKER。

首页必须是index.html 作为网站的要求，但您可以在PC 上随意命名您的页面。请记住链接不包含index.html，因为我懒得包含它，这意味着编写对您没有用处的代码。

// Code goes here

var pages = 5;
var parts = 3;
var pg = [];
var pt = [];
var menu = document.getElementById('menu');
var i, j;
for (i = 0; i < pages; i++) {
  var page = 'page' + (i+1);
  pg.push(page);
  for (j = 0; j < parts; j++) {
    var part = 'part' + (j+1);
    pt.push(part);
    var url = pg[i] + '.html#' + pt[j];
    var anchor = document.createElement('a');
    anchor.href = url;
    anchor.textContent = 'Page ' +(i+1) + ' Part ' +(j+1) ;
    menu.appendChild(anchor);
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <h1>Index</h1>
  <nav id='menu'></nav>
  <section id='part1'>
    <h2>Part1</h2>
  </section>
  <section id='part2'>
    <h2>Part2</h2>
  </section>
  <section id='part3'>
    <h2>Part3</h2>
  </section>
  <script src="menu.js"></script>
</body>

</html>

Answer 2

这可能与您的问题完全无关，或者让您了解如何更好地构建应用。要处理您的导航需求，您不需要 Javascript。但是您可以将其添加到组合中，以通过漂亮的噱头改进此解决方案。

<html>

<head>
  <title>one-page-app</title>
  <style>
    .pages {
      display: none;
    }
    .pages:target {
      display: block;
    }
  </style>
</head>

<body>

  <nav>
    <p>Main Menu:</p>
    <a href="#home">Home</a>
    <a href="#faq">FAQ</a>
    <a href="#external">External content (other file)</a>
  </nav>

  <a name="home"></a>
  <div id="home" class="pages">

    <h1>Home</h1>
    <p>Hi. Check <a href="#faq">FAQ</a> to see how it's working.</p>

  </div>

  <a name="faq"></a>
  <div id="faq" class="pages">

    <h1>FAQ</h1>
    <ul>
      <li>
        <h2>How does it work?</h2>
        <p>The magic of the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:target">:target pseudo-class in CSS</a>.</p>
      </li>
      <li>
        <h2>What if I have more content?</h2>
        <p>
          I've worked with 2-3 MB html files without a problem. That's when smartphone browsers were really choking. ;) For local pages, loading time is no issue after all.</p>
      </li>
      <li>
        <h2>What about REALLY old browsers?</h2>
        <p>They will see all the content at once, but due to the anchors, the main menu will still work. Add "back to top" links to the pages if you want.</p>

  </div>

  <a name="external"></a>
  <iframe id="external" class="pages" src="http://google.com"></iframe>

</body>

</html>

编辑 - 问题编辑后：

如果您想保持当前的结构，您可以这样做：

<a name="page1_1"></a>
<iframe id="page1_1" class="pages" src="page1.html#part1"></iframe>

<a name="page1_2"></a>
<iframe id="page1_2" class="pages" src="page1.html#part2"></iframe>

等等。