用＃标记改变内容

Question

我见过很多有我感兴趣的系统的网站。系统是这样的：只有一个页面。如果您单击菜单中的任何链接，页面会使用＃标记滑动到该区域。

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

我找不到任何当前的例子，但我可以总结如下：

----菜单（通常是固定的） - ---

一是内容

---

第二内容

---

依此类推。

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

我该怎么做？

Answer 1

您将id s指定给要用菜单定位的元素，并使那些id与散列片段（#xyz）匹配。

例如，此链接：

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

---

你曾经说过：

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

点击时将采取用户到该元素的 “滑动”。默认情况下，页面跳到那里，而不是滑动。滑动是通过用动画覆盖默认行为来完成的。推荐特定的插件不上话题的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>

点击该链接就会跳下来该元素。