Html 同一页面内的锚点不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17334483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Anchors within the same page not working?
提问by Tom Maxwell
I'm trying to link to elements within the HTML of my page, but it's not working and I'm unsure as to why.
我正在尝试链接到页面 HTML 中的元素，但它不起作用，我不确定原因。
Here's the initial link:
这是初始链接：
<ul>
<a href="#"><li>About Me</li></a>
<a href="#"><li>Past</li></a>
<a href="#Work"><li>Work</li></a>
<a href="http://blog.tommaxwell.me"><li>Blog</li></a>
</ul>
I'd like all the li's in this list to be links to somewhere else on the page (except the last one).
我希望此列表中的所有 li 都链接到页面上的其他位置（最后一个除外）。
And at the top of this code is where I'm trying to link to:
在这段代码的顶部是我试图链接到的地方：
<div id="Work">
<a name="Work"><h2 id="work-title">Work</h2></a>
<ul>
<li>
<h3>BrainDB</h3>
<p>BrainDB is a new startup I'm working on with my co-founder, <a href="http://www.twitter.com/masonlong" id="mason">@masonlong</a>. I write everything from Rails to AngularJS and CSS. BrainDB's goal is to augment the mind with useful and inviting services.</p>
</li>
<li>
<h3 id>SummarizeIt</h3>
<p><a href="http://54.225.211.118/" id="summarize">SummarizeIt</a> is a JavaScript project that I built during a weekend. It utilizes an API for summarizing content, like blog posts, into bit-sized chunks. </p>
</li>
<li>
<h3>Freelance</h3>
<p>I freelance from time to time. I work with personal clients, as well as through <a href="https://www.elance.com/s/tommaxwell/?utm_medium=social&utm_source=twitter&utm_campaign=free&SiteTarget=share_profile&utm_term=3712117" id="elance">Elance</a>. I'm <a href="mailto:[email protected]" id="email">available</a>.</p>
</li>
</ul>
</div>
Do the areas I link to have to use the section tag? I have multiple of these divs with ul's in them.
我链接的区域是否必须使用部分标签？我有多个带有 ul 的 div。
回答by Alexander Goncharov
It's important. Anchors will not work on all pages, have tag <base>in head (but root page), if href of anchor is page-relative (begins with #).
这一点很重要。<base>如果锚点的 href 是页面相关的（以 开头），则锚点不会在所有页面上都有效，在头部（但根页面）中有标记#。
For example you are on the page:
例如，您在页面上：
Base tag on page like this:
像这样的页面上的基本标签：
<base href="https://example.com">
In code of this page there is an anchor:
在这个页面的代码中有一个锚点：
<a href="#anc">anchor</a>
With base-tag it'll follow to https://example.com/#anc, not what was expected.
使用 base-tag 它将遵循https://example.com/#anc，而不是预期的。
To resolve this issue, you can do one of this:
要解决此问题，您可以执行以下操作之一：
- Use domain-relative anchor.
- Overload anchor click with javascript and swap url to domain-relative.
- Delete base tag - it is often unused.
- 使用域相关的锚点。
- 使用 javascript 重载锚点点击并将 url 交换为域相关。
- 删除基本标签 - 它通常未被使用。
回答by DV77
回答by lloan
The anchor needs to have the ID or name of Work but you are using it twice.
锚点需要具有 Work 的 ID 或名称，但您使用了两次。
<a href="#Anchorname">linked text</a>
(Target point)
<a name="Anchorname">a named anchor</a>
回答by SkNiaZi786
Try This.
尝试这个。
<a href="#About"></a>
Now If You Want To Link it In the Bottom Somewhere.
现在，如果您想将其链接到底部某处。
<a name="About">(Make Sure There Is Not Text here)</a>About Section.
回答by jignesh kheni
use anchor tag inside li tag like this.
像这样在 li 标签中使用锚标签。
<ul>
<li><a href="#id">about</a></li>
<li><a href="#work">work</a></li>
<li><a href="#id">blog</a></li>
</ul>
something like this and your link id as below
像这样的东西和你的链接ID如下
<div id="work">
</div>
回答by Brister Productions
I was having this problem as well (same page navigation using links) and the solution was very easy (though frustrating to figure out). I hope this helps - also I checked IE, Firefox, and Chrome and it worked across the board (as of 05-22-2019).
我也遇到了这个问题（使用链接进行同一页面导航）并且解决方案非常简单（尽管弄清楚令人沮丧）。我希望这会有所帮助 - 我还检查了 IE、Firefox 和 Chrome，并且它全面运行（截至 2019 年 5 月 22 日）。
Your link should looks like this:
您的链接应如下所示：
<a href="pagename.html##anchorname">Word as link you want people to click</a>
and your anchor should look like this:
你的锚应该是这样的：
<a name="#anchorname">Spot you want to appear at top of page once link is clicked</a>
