同一页面内的锚点不起作用？答案

【问题标题】：Anchors within the same page not working?同一页面内的锚点不起作用？
【发布时间】：2021-03-06 17:05:17
【问题描述】：

我正在尝试链接到我页面的 HTML 中的元素，但它不起作用，我不确定为什么。

这是最初的链接：

<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>

我希望此列表中的所有 li 都链接到页面上的其他位置（最后一个除外）。

在这段代码的顶部是我试图链接到的地方：

<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:tommaxwell95@gmail.com" id="email">available</a>.</p>
            </li>
        </ul>
    </div>

我链接的区域是否必须使用section标签？我有多个带有 ul 的这些 div。

【问题讨论】：

除了
之外看不出任何问题，您是否正在运行任何可能劫持您的链接的框架？
这里有什么问题，对我来说似乎有用
我必须检查一下我使用的任何东西是否会导致它。
它是 jQuery Mobile。谢谢，JanR！
您在哪个浏览器上测试此代码？似乎适用于 Firefox 40

标签： html anchor

【解决方案1】：

这很重要。如果锚的 href 是页面相关的（以 # 开头），锚将不会在所有页面上工作，头部（但根页面）有标签 <base>。

例如你在页面上：

https://example.com/the/page/

页面上的基本标签如下：

<base href="https://example.com">

在这个页面的代码中有一个锚点：

<a href="#anc">anchor</a>

使用 base-tag 它将跟随 https://example.com/#anc ，而不是预期的。

要解决此问题，您可以执行以下操作之一：

使用域相关锚。
使用 javascript 重载锚点点击并将 url 交换为域相关。
删除基本标签 - 它通常不被使用。

【讨论】：

#3 是个坏建议。也许你很少在你的项目中使用它们，但它们并不少见；）
@Robert M. 当布局中没有基本标签时，它更有序。但是，是的，如果您删除 base-tag - 您可能会破坏某些东西：修复速度很快，但实际上您找不到它。
对于可能没有意识到删除它的潜在影响的新手用户来说仍然是个坏建议；）
FWIW，我遇到了这个问题，这就是解决方案。我的场景可能是独一无二的，因为我从 S3 提供通过 Mustashe 生成的静态文件。我使用的基本模板是一个渲染的 Angular 页面，并且 Base 标签仍然存在。移除它可以让我的内部锚点完美工作。
使用 base 并不常见。假设我们有下一个 url :somedomain/article.php?id=4 它可以转换为 somedomain/article/4 。然而，浏览器认为每个相关资源（图像）都指向文件夹 article/4

【解决方案2】：

您好，您必须使用 'a id' 才能被 'a href' 调用

示例如下：

<a href="#Works">My Works</a>

它会调用：

<a id="Works">Works</a>

Demo

【讨论】：

【解决方案3】：

锚需要有 Work 的 ID 或名称，但你使用了两次。

HTML Tags - links

<a href="#Anchorname">linked text</a>

(Target point) 
<a name="Anchorname">a named anchor</a>

【讨论】：

【解决方案4】：

试试这个。

<a href="#About"></a>

现在，如果您想在底部某处链接它。

<a name="About">(Make Sure There Is Not Text here)</a>About Section.

【讨论】：

【解决方案5】：

像这样在li标签内使用锚标签。

<ul>
    <li><a href="#id">about</a></li>
    <li><a href="#work">work</a></li>
    <li><a href="#id">blog</a></li>
</ul>

类似的东西和你的链接ID如下

<div id="work">
</div>

【讨论】：

【解决方案6】：

我今天遇到了这个问题。另外我想平滑滚动到锚点，这拯救了我的一天。可以像@Alexander Goncharov 在他的回答中指出的那样指出“问题”。

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

我找到了这个解决方案here

【讨论】：

【解决方案7】：

我也遇到了这个问题（使用链接进行相同的页面导航），解决方案非常简单（虽然很难弄清楚）。我希望这会有所帮助 - 我还检查了 IE、Firefox 和 Chrome，并且它全面运行（截至 2019 年 5 月 22 日）。

您的链接应如下所示：

<a href="pagename.html##anchorname">Word as link you want people to click</a>

你的锚应该是这样的：

<a name="#anchorname">Spot you want to appear at top of page once link is clicked</a>

【讨论】：

【解决方案8】：

就我而言，我找到了这个解决方法：

代替

<base target=_blank>

我放在那里：

<base href=. target=_blank>

这样修改后，文件的外部链接正确跳转到了锚点：

http://domainov.us/directorovich/filovskaja.html#anchorovna

【讨论】：

之外看不出任何问题，您是否正在运行任何可能劫持您的链接的框架？