如何从Page 1点击链接跳转至Pages 2指定段落及CMS搭建技术问询

Hey there! Let's walk through exactly how to set up that cross-page section jump, tailored to your CMS where content is stored as HTML in a database. It all relies on HTML's native anchor link feature—super straightforward once you map it to your workflow.

1. 给Page 2的目标段落添加唯一ID #

因为你的页面内容以HTML格式存在数据库中，打开文本编辑器编辑Page 2，找到你想跳转的目标行（比如Line 2 Page 2），给对应的HTML元素添加唯一的id属性。

举个例子，原本的内容如果是：

<p>Line 2 Page 2</p>

修改为：

<p id="page2-line2">Line 2 Page 2</p>

小提示： id必须在Page 2内唯一，只能用小写字母、连字符或下划线（不能有空格），尽量起得直观好记，方便后续引用。

2. 在Page 1中创建带锚点的跳转链接 #

回到Page 1的文本编辑器，把需要触发跳转的文本改成<a>标签。href值要结合Page 2的完整URL，加上#和刚才设置的锚点ID。

如果Page 2的固定访问URL是/pages/page-2，链接代码就是：

<a href="/pages/page-2#page2-line2">跳转到Page 2的第2行</a>

如果你的CMS是动态生成URL（比如基于页面ID或分类路径），直接替换成动态URL变量即可。比如用模板变量的写法：

<a href="{{ page_2_url }}#page2-line2">跳转到Page 2的第2行</a>

3. 确保编辑器和数据库保留自定义HTML #

注意：部分富文本编辑器会自动过滤id属性或锚点链接这类自定义内容。添加代码时建议切换到源码编辑模式，避免编辑器自动清理。

保存后可以检查数据库里的HTML内容，确认带id的元素和锚点链接都被正确存储，没有被CMS的内容过滤规则移除。

额外：特殊场景处理 #

• 如果你的CMS通过AJAX加载Page 2内容（而非跳转到新页面），浏览器不会自动滚动到锚点位置，需要加一段简单的JavaScript触发滚动：

  document.getElementById('page2-line2').scrollIntoView({ behavior: 'smooth' });
  

• 如果测试时跳转无效，先确认两个关键点：Page 1链接里的锚点ID和Page 2里的id完全匹配，且Page 2的目标元素确实存在这个id（有时候编辑器会悄悄剥离属性）。

内容的提问来源于stack exchange，提问作者climivin