自定义页面锚点定位、返回顶部和粘性定位
1. 使用场景
在较长的网页内容中,方便用户快速定位到需要查阅的部分;为了提供更好的用户体验,添加“返回顶部”按钮,并利用锚记链接将用户快速返回页面顶部。
2. 实现功能
2.1. 创建自定义页面
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1699406388367-bf716f54-2a63-4cbe-aa09-b6699e22b344.png)
2.2. 需要锚点定位的模块配置
每个需要通过右侧目录快速跳转的模块,开启“将唯一标识用作DOM ID”选项。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1699407302721-5cf51c96-9451-4b73-954b-0bebfdd5baa7.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1699407073322-5b32665b-4084-4773-8719-8661194d1db9.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1699407334310-e4790af0-d464-48c6-ab28-8ec5ac8cdc78.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1699407372851-70ba3e9c-e3bf-4c93-8edb-a4fa62791106.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1699407406679-74d68ef4-1365-43ab-9685-48390d94f495.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1699407429237-6800dafa-a116-4ad7-bac6-3add65743c1c.png)
2.3. 将下述代码拷贝至页面 JS 中并绑定动作
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1699407846144-858830c8-f921-46b6-bf3a-06c9a21d205a.png)
// 目录点击
export function onSelect(selectedKeys, extra) {
const obj = {
'0-0-0': 'div_lonydol8', // 模版介绍
'0-0-1': 'div_lonydol9', // 办公地址管理页面
'0-0-2': 'div_lonydola', // 信息录入管理页面
'0-0-3': 'div_lonydolb', // 咨询业务登记
'0-0-4': 'div_lonydolc', // 落户申请...
'0-0-5': 'div_lonydold', // 证明类
}
if (selectedKeys.length && extra.selected) {
if (selectedKeys[0] === '0-0') {
// 返回顶部
this.backToTop();
} else {
// 跳转至指定锚点
this.scrollIntoPoint(obj[selectedKeys[0]]);
}
}
}
// 跳转至指定锚点
export function scrollIntoPoint(pointId) {
// api文档及兼容性:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
document.querySelector(`#${pointId}`).scrollIntoView({
behavior: 'smooth',
});
}
// 返回顶部
export function backToTop() {
// api文档及兼容性:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
const scrollNode = document.querySelector('.next-shell-sub-main') || window;
scrollNode.scrollTo({
top: 0,
behavior: 'smooth',
});
}
2.4. 目录设置粘性定位
当滚动条滚动的时候,目录可以吸在页面顶部,提高用户体验。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1699408250550-e668eefc-da17-4ce1-ba40-1248f0509063.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1699408266210-62264b81-3620-4fc2-bf7f-24b5b4e5cc56.png)
给该页面设置如下样式,否则粘性定位不生效
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1699414612783-057dbc20-f51f-4408-8535-fcfd04b22b24.png)
:root {
position: sticky;
position: -webkit-sticky;
top: 0;
border-radius: 8px;
max-height: 400px;
overflow-y: auto;
}
@media screen and (max-width: 480px){
:root {
margin-bottom: 16px;
}
}
.vc-page {
overflow: visible;
}
3. 实现效果
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1699408490285-c1d8aefe-0dba-4bfd-9fe4-1b921bf3f171.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1699408526900-36699fc7-a46a-452d-9c36-1f47a110ec71.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1699408565640-82643717-9222-4259-88d6-6475dedd5950.png)
4. 在线试玩
本文档对您是否有帮助?