请教一个HTML超链接锚点的问题

Posted 2023-05-11

现在设置的html锚点，点击后会到达指定位置，但指定位置总是出现在页面的最上端，有什么办法可以使到达的位置出现在页面的中间，谢谢了！！

参考技术A html锚点问题：首先要知道锚点的链接方式是什么？比如你的是在页面的某一个区域，点击了以后出现在头部如下

锚点点击 <a href="#top">回到顶部</a>
然后出现的位置是：<p name="top">这里是顶部</p>

如果你想让你的锚点链接到中间区域，在你想要看到的位置上添加一个锚点即可，如果是当前的锚点，那么你需要把头部的name="top"去掉，然后在你想看到的区域添加一个name属性就可以了；
看看锚点的写法，自己自然就知道如何操作了；
希望我的回答能帮到你，如果还不懂的话，请继续追问我；追问

这个我知道，添加锚点跳转后，锚点总是出现在屏幕的最上方，比如论坛里的帖子，一页有30个回复，比如说我跳到17楼，那么17楼出现在了屏幕的最上方，有没有什么办法让他出现在中间

追答

那你就跳到17楼上面数几楼，比如1-30，跳到15楼，17楼不就在中间了么，你非得跳到17不可啊

本回答被提问者和网友采纳

设置标题锚点时如何防止标题标签继承超链接样式

【中文标题】设置标题锚点时如何防止标题标签继承超链接样式

【英文标题】：How to prevent heading tags from inheriting hyperlink styles when setting up heading anchors

【发布时间】：2016-12-14 07:16:19

【问题描述】：

抱歉，如果这是一个新手问题。我的部分工作是使用 Google 网站将传统的 Word 文档转换为在线 Web 文档。

我要迁移的文档通常有一个内容页、章节和节等。

在 HTML 中，我希望有一个内容页面，该页面提供指向各种文档部分和标题的可点击链接 - 我正在使用 HTML 锚点。

问题：我不希望被链接的文本继承随后的超链接样式。例如：

<div>
<h1>Contents page:</h1>
<p><a href="#heading">Section 1: Introduction</a><p>
</div>

<section>
<h1><a name="heading">Section1: Introduction</a></h1>

<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim lectus eu risus tortor facilisi class, eleifend faucibus morbi pretium bibendum lobortis tellus hendrerit sociis litora etiam aliquet pharetra.</p>

</section>

现在标题标签由于属性而显示为超链接，这是我不想要的。相反，我希望它保留其默认标题样式，而无需我定义任何覆盖样式或类似的东西。

我在某处读过一些关于 'all:initial' 的内容，我不知道这些内容是否适用于 HTML5/CSS3。

我想知道这是否只是 Google 网站的问题，还是..？

有没有办法做到这一点？谢谢

【问题讨论】：

Check this answer

【参考方案1】：

CSS 方式就是：

a 
  color: inherit;
  text-decoration: none;

无论如何，如果你想内联，你可以使用：

<a style="all: inherit"></a>

<div>
<h1>Contents page:</h1>
<p><a href="#heading">Section 1: Introduction</a><p>
</div>

<section>

<h1><a name="heading" style="all: inherit">Section1: Introduction</a></h1>

<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim lectus eu risus tortor facilisi class, eleifend faucibus morbi pretium bibendum lobortis tellus hendrerit sociis litora etiam aliquet pharetra.</p>

</section>

这使每个链接看起来都像普通文本。如果您只是希望您的命名锚标签没有样式（Chrome 上没有样式，所以我可能没有安静地回答您的问题......）使用@CBroe 的答案！这里不需要<a> 标签。只需命名<h1>。

【讨论】：

您好，感谢您的回答 - 谷歌网站只是不想接受此 html，只是显示错误代码“警告：您的 HTML 包含一些不允许的标签。这些已从您的更改中删除。'

什么是禁止标签？它们是否突出显示？

它们没有突出显示，但我认为它不太喜欢 'id' 属性，只是省略了它们。

好的...我已经将我的答案编辑回 name="" 解决方案...它现在可以工作还是 style 属性也被禁止？那样的话，我不知道你的问题能不能解决……

嗨，我刚试过 - 不幸的是，谷歌网站似乎去掉了一些 CSS/HTML，所以它甚至不接受 'all:inherit' 属性。不确定是否有任何解决方法..但感谢您的尝试。通常你的解决方案会起作用..

【参考方案2】：

<h1><a name="heading">Section1: Introduction</a></h1>

您无需使用<a name="heading"> 在页面内创建锚目标 - 每个具有 id 的元素也可以成为此类哈希锚链接的目标。

所以只需使用<h1 id="heading">Section1: Introduction</h1>，不会应用任何链接样式。

【讨论】：

您好，感谢您的回答，但是我之前尝试使用 'id' 属性，但它似乎不适用于谷歌网站：/ 我尝试在那里运行您的代码，不想接受锚点。

【参考方案3】：

考虑到 Google 协作平台的限制，我能想到的唯一解决方案是在您的 <h1> 标记中留空锚元素，如下所示：

<h1><a name="heading"></a>Section1: Introduction</h1>

你可以在里面放一个空格：