Question

我见过很多网站都有我很好奇的系统。系统就像：只有一页。如果单击菜单中的任何链接，页面将使用#mark。

滑动到该区域

网址通常如下：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>

Answer 2

这些是锚标记，您可以通过为元素提供ID来定义它们。

实施例。如果你有这样的链接：www.yoursite.com/whatever.html#gohere

<p>元素的ID为'gohere'

<p id="gohere"></p>

单击该链接将跳转到该元素。

用#mark改变内容

2 个答案: