> For the complete documentation index, see [llms.txt](https://helps.ptengine.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helps.ptengine.com/cn/faq/experience-edit/anchor-link.md).

# 锚点链接的添加方法

想让弹窗里的按钮点一下就**跳到本页某个位置**（而不是跳去别的页面），用锚点链接。做法是：给目标位置一个唯一 id，再让按钮链到 `#那个id`。

***

## 开始之前 <a href="#before-you-start" id="before-you-start"></a>

* 目标元素**必须有一个唯一的 id** —— 页面上已经有就直接用，没有才需要自己加
* id **不能和页面上其他元素重复**，重了浏览器只认第一个

***

## 设置步骤 <a href="#setup-steps" id="setup-steps"></a>

{% stepper %}
{% step %}

### 确定要跳到哪个元素

打开编辑器，找到页面内要作为跳转目标的那块内容。
{% endstep %}

{% step %}

### 给它一个唯一 id

目标元素已经有 id 就跳过这步。没有的话编辑它的 HTML，加上：

```html
id="你自己起的唯一ID"
```

{% hint style="warning" %}
加在标签里时，**前面要留一个半角空格**，别和前一个属性粘在一起：

```html
<div class="section" id="campaign-form">   ← 对
<div class="section"id="campaign-form">    ← 错
```

{% endhint %}
{% endstep %}

{% step %}

### 按钮的动作类型选“打开链接”

选中按钮 → 点工具条上的 🔗 → **应用点击动作**打开 → **动作类型**选**打开链接**。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-2285c22fd7fbb31184b0b2bad3d04029af7fe570%2Ffaq-anchor-link-01.png?alt=media" alt="按钮触发面板：动作类型、链接URL、三个勾选项"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### 链接URL 切成“相对链接”，填 `#id`

**链接URL**那个下拉默认是**绝对链接**，要改成**相对链接**，下面的输入框里填 `#你刚才起的ID`。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-ac8087ef6ec3db45233be05c26d987d1fa0d5ec5%2Ffaq-anchor-link-02.png?alt=media" alt="链接URL 下拉的两个选项：绝对链接 / 相对链接"><figcaption></figcaption></figure>

{% hint style="warning" %}
**别勾“在新标签页打开”。** 锚点是跳本页内的位置，勾了会新开一个标签页重新加载，跳转效果就没了。

想让访客点完按钮弹窗自动消失，勾**点击后关闭弹窗**。
{% endhint %}
{% endstep %}

{% step %}

### 预览确认，再发布

用[体验预览](/cn/experience/campaign/preview.md)实际点一下，确认页面滚到了正确位置再发布。
{% endstep %}
{% endstepper %}

***

## 跳不过去怎么办 <a href="#troubleshooting" id="troubleshooting"></a>

* **id 拼错或大小写不一致** —— HTML 的 id 区分大小写，`#Form` 和 `#form` 不是一个
* **id 重复** —— 页面上有两个一样的 id，浏览器只认第一个
* **链接URL 还是“绝对链接”** —— 这种情况下 `#id` 会被当成相对于域名的地址，跳不到
* **勾了“在新标签页打开”** —— 见上面的提示

***

## 相关页面 <a href="#related-pages" id="related-pages"></a>

* [绝对路径和相对路径](/cn/faq/experience-edit/absolute-relative-path.md) — 两种链接写法的区别
* [创建弹窗/悬浮条的方法](/cn/experience/campaign/create-new-1/popup-bar-creation.md) — 按钮的其他动作类型
* [体验预览](/cn/experience/campaign/preview.md)
