自定义页面锚点定位、返回顶部和粘性定位

能力免费版轻享版专业版专属版页面JS代码不支持不支持支持支持1. 功能概述用户可以通过宜搭中的「动作面板」去写 JS 代码，从而实现自己的业务逻辑或逻辑判断。通过动作面板，您可以「更加方便的组织和复用代码」、「实现复杂交互」。注意：通过JS面板编写的逻辑一般情况下是不会对历史数据生效的。2. ...

https://docs.aliwork.com/docs/yida_support/lbtl0t/ocmxyv

1. 使用场景

在较长的网页内容中，方便用户快速定位到需要查阅的部分；为了提供更好的用户体验，添加“返回顶部”按钮，并利用锚记链接将用户快速返回页面顶部。

2. 实现功能

2.1. 创建自定义页面

2.2. 需要锚点定位的模块配置

每个需要通过右侧目录快速跳转的模块，开启“将唯一标识用作DOM ID”选项。

2.3. 将下述代码拷贝至页面 JS 中并绑定动作

// 目录点击
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. 目录设置粘性定位

当滚动条滚动的时候，目录可以吸在页面顶部，提高用户体验。

给该页面设置如下样式，否则粘性定位不生效

: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;
  }
}