# 锚点列表

来源快照：`result_data_new_260518.json`

- 来源 ID：`1183675708351127563`
- 模块：低代码平台e-builder
- 目录：页面引擎 - 页面设计器 - 页面组件 - 基础组件 - 基础组件/导航类
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

# 锚点列表

## 一、功能背景及价值用途

锚点列表组件是一种页面内导航工具，通过提供内容的结构化索引，使用户能够在长页面中快速定位和跳转到特定内容区域，无需大量滚动。它支持悬浮显示、位置自定义、搜索功能和响应式布局，适用于产品详情页、文档页面、企业官网等多种场景，有效提升用户体验、减少信息获取时间，同时通过组件化设计提高开发效率，满足不同业务需求的页面内导航功能。

## 二、配置过程图

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163330027261591565&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 三、功能概述及使用说明

### 1、功能入口

设计器左侧组件列表中，路径为【基础组件】-【导航类】-【锚点列表】，拖入设计器中即可使用。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163330027261591579&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

拖入页面后，锚点列表组件默认在右下角悬浮，并自动生成一个锚点。一个页面只允许存在一个锚点列表组件。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163330031629131782&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 2、基础设置

1.

悬浮及位置

锚点列表支持悬浮设置，默认为悬浮状态，悬浮时支持锚点列表位置设置。关闭悬浮，锚点列表占位，需要手工调整位置。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163330031464284179&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

关闭悬浮则与常规组件相同，可以拖动调整位置。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163330031643705399&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

2.

锚点方向

锚点列表默认纵向，也可以选择横向展示，效果如下。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163330035896729606&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

3.

启用搜索

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163330035896729618&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

4.

启用收缩

锚点列表支持收缩，启用收缩时，可配置默认收缩。默认收缩开启，打开页面时，锚点列表默认为收缩状态。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163330040269398020&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

5.

允许用户拖动

锚点列表悬浮显示时，可设置是否允许用户拖动。

### 3、滚动设置

 

1.

滚动距离

点击锚点按钮，锚点设置的组件滚动至顶部的距离；一般为顶部导航或其他内容预留高度。

### 4、锚点设置

1.

单击事件

单击事件支持滚动到组件、自定义动作和回到顶部。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163330040062607368&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

滚动到组件，支持随意选择页面中的组件进行设置。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163330040049090582&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

点击锚点，滚动到对应的组件。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163330040062607388&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

回到顶部，顾名思义点击锚点后滚动到最顶部的位置。

自定义事件动作，点击锚点后不再触发滚动，而是执行提前预置好的点击事件。

### 5、自定义样式设置

锚点列表支持自定义样式设置。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163330044463702021&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 四、更多参考资料

[事件配置参考文档](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?id=1159192088358584536&freepass_doc=1&space_id=1157961794811633670 "事件配置参考文档")
