jquery - 用 # 标记更改内容

Question

我看到很多网站都有我很好奇的系统。系统就像:只有一页。如果您单击菜单中的任何链接，页面将滑至使用 # 标记的该区域。

网址通常是这样的:example.com/#content1

我找不到任何当前示例，但我可以这样总结:

---- 菜单(通常是固定的)-----

第一个内容

---

第二个内容

---

等等。

如果我单击菜单中的任何链接。页面将滑动到该区域。

我该怎么做？

Answer 1

您将 id 赋予您希望菜单定位的元素，并使这些 id 与散列片段(#xyz)。

例如，这个链接:

<a href="#first">First</a>

点击后会将用户带到此元素:

<div id="first">...</div>

---

您说过“滑动”。默认情况下，页面跳到那里，而不是滑动。滑动是通过用动画覆盖默认行为来实现的。推荐一个特定的插件不是 SO 的主题，但是例如这里有一个简单的 jQuery 示例(您在问题中标记了它):

// Handle clicks on our navigation anchors
$(".nav a").on("click", function(e) {
  // Get the href attribute, which will be #first or similar, and get the element using that
  // as a CSS selector
  var hash = this.getAttribute("href");
  var target = $(hash);
  // Tell jQuery to animate us to that location. Note that some
  // browsers animate body, others `html`, so we 
  // do both
  $('body, html').animate({
    scrollTop: target.position().top
  }, 800);
  
  // Prevent the usual jump
  e.preventDefault();
  
  // Set the hash *without* causing the jump (for bookmarks and such)
  if (history && history.replaceState) {
    history.replaceState(null, null, hash);
  }
});

.fill {
  height: 5em;
}

<ul class="nav">
  <li><a href="#first">First</a></li>
  <li><a href="#second">Second</a></li>
  <li><a href="#third">Third</a></li>
  <li><a href="#fourth">Fourth</a></li>
</ul>
<div class="fill">
  Some content to fill space
</div>
<div id="first" class="fill">This is the first target</div>
<div id="second" class="fill">This is the second target</div>
<div id="third" class="fill">This is the third target</div>
<div id="fourth" class="fill">This is the fourth target</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>