html的锚点链接

HTML锚点链接：从URL直接访问页面特定区域的教程

说实话，这件事需要解释清楚。
使用 URL 直接导航到页面上的特定位置。
现在必须使用 id 属性，而名称早已被删除。

我们来谈谈HTML5 ，目前的标准是使用id。
为了什么？身份好。

通用，不仅可以使用标签，h1 、div、p还可以添加标识符 用途广泛，可以进行CSS样式、JS操作和中断 合规性，W3 C和WHATWG都说，以后肯定不会有问题。

具体怎么做呢？
1 .首先给目标位置添加一个ID

5 .1 使用选项

2 然后在链接中添加ID名称 转到第 5 .1 节 看介绍
3 您也可以直接在浏览器的地址栏中输入 URL。
https://yoursiteweb.com/votrepage.section5 -1
如何管理兼容性问题？
旧浏览器？如果这不起作用，您可以同时添加 name 和 id，但它的价值是相同的 5 .1 使用选项 但最好将 ID 直接添加到标题中，而不是使用空标签。

注意事项： L'identifiant doit être unique et ne peut pas être répété 最好添加到标题或段落等内容元素中 如果标识符有特殊字符，则必须对其进行 URL 编码（例如，section-1 必须写为section%2 D1 ）。

平滑滚动？可以使用JS来实现。

JavaScript document.querySelectorAll('a[href^=""]').forEach(anchor => { Anchor.addEventListener('点击', function(e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ 行为：“温柔” }); }); });
跳转不成功怎么办？
身份错误？ URL和ID必须完全相同，甚至大小写也必须正确。
内容是由JS动态加载的吗？确保在跳跃之前已渲染 单页应用程序？它应该与路由库一起使用，而不仅仅是 Anchor
name 属性？几乎不再使用了。
除非保留旧代码或支持IE6 等旧浏览器，否则今天谁还在使用它？
简而言之，使用标准且可靠的 ID 即可。
兼容性问题，如果实在不行就想办法解决。

HTML链接怎么设置锚点跳转_HTML页面锚点跳转功能的实现步骤

哈，你说的是锚点跳跃。
上周我在帮助朋友创建一个长文档页面时使用了这个。

想一想。
那种文件很长。
用户可以单击目录条目直接转到该内容，他们的体验立即得到改善。
与上一个不同的是，它直接把你带到页面顶部，看起来很突兀。

我会告诉你实际的步骤。

1 首先给目标元素添加一个ID。
ID 不是一个类。
例如，您有一个辅助标题 < h2 id="section3 ">第 3 章摘要，ID“section3 ”是锚点。
上次我这样做时，我专门检查了页面ID不能重复。
在我的文档中，我为所有章节标题设置了 ID。

2 然后，我们将在其前面添加一个指向第 3 章摘要的超链接，后跟一个带有我们刚刚设置的 ID 的 href。
当您单击此链接时，页面将自动滚动到该位置。
我们已经对其进行了测试，它在 Firefox、Chrome 和 Edge 中完美运行。

3 有时您可能需要跳过页面，例如从目录页面转到文章页面的特定部分。
此时href表示为“帖子页面地址锚点id”，比如跳转到下一篇帖子的第5 章。
上次使用活动介绍页时，方法是跳转到总目录中特定文章的指定位置。

4 现代浏览器支持非常平滑的滚动效果。
您所要做的就是添加一行 CSS。
{ 滚动行为：平滑；添加后，你的跳跃会有渐变效果。
它缓慢滚动而不是“嗖嗖”地滚动到顶部。
用户体验要好得多。
上次我添加此内容时，我的朋友说该页面感觉“活跃”。

但是，有一些陷阱需要注意。

ID 必须是唯一的。
上次我很困惑。
两个次要标题使用相同的 ID。
结果跳跃就扭曲了，花了很长时间。

IE浏览器可能不支持如此平滑的滚动。
如果您的目标受众是现有的 IE 用户，您可能需要做出判断。
我记得去年有一个客户，最终想出了一种与他们兼容的写作风格。

移动页面时，请确保目标页面的锚点ID确实存在。
我的朋友忘记将该 ID 添加到目标页面。
结果跳转后页面一片空白。

此功能确实立即提高了您的导航感。
在上一个长文档上使用锚点后，用户报告说“我终于不必再滚动了。
”尽管它们是细节，但有时这些小的优化可以产生最大的影响。

你想试试这个吗？如果您有任何疑问，请随时与我联系。

HTML页面内部锚点链接的正确使用指南

抱歉，您问的是锚链接。
我以前在这方面经历过很多陷阱。
我记得在开发一个网站时，我想创建一个链接来转到页面的某个部分，但我花了很长时间才弄清楚。
最后我发现锚链接不正确。

大概是 2 01 5 年。
我正在为一家小公司开发一个网站。
当时，该网站非常简单。
我只是想用它作为内部导航。
我最终使用了一个数字和一个 id，但页面根本没有翻过。
当时我以为我写错了代码。
后来网上查了一下，发现必须要用id属性，不能直接写该部分。

然后我又尝试了一下，在 id 前面添加了 name 属性，结果真的成功了。
不过后来我发现这其实是一个兼容性的解决方案，现在新的浏览器都建议直接使用ID。

我曾经帮助一个朋友改过他的网站，他的页面跳转有时会导致错误的页面。
我一看，原来他用的ID并不唯一。
同一页面上的多个位置使用了相同的 ID。
这绝对是不行的。
我让他改了ID，问题就解决了。

还有一次，一位客户反映他的移动端页面跳转出现问题。
我一看，原来他用的ID有特殊字符，比如空格，必须经过编码才能使用。
我帮他改了编码，问题又解决了。

至于平滑滚动，我也遇到过这种情况。
我记得有一次我在网站上添加了平滑滚动功能，但它在某些浏览器上效果不佳。
然后我用JavaScript来解决，问题就解决了。

综上所述，锚链接有以下几点需要注意： 1 .首先使用id属性而不是name属性。
2 . 确保ID唯一且不重复。
3 . ID名称必须符合语义，并且不要使用缩写。
4 、特殊字符必须进行编码。
5 . 使用 CSS 或 JavaScript 可以实现平滑滚动。

这个问题可以说很复杂，也可以说很简单。
注意细节很重要。
你知道我的意思？