Custom page anchor positioning, return to top, and sticky positioning

JS 动作面板 - 前端代码开放 | 钉钉宜搭·帮助中心

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

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

1. Usage scenarios

In a longer web page content, it is convenient for users to quickly locate the part to be consulted; In order to provide a better user experience, add the "back to the top" button, and use the anchor link to quickly return the user to the top of the page.

2. Implement functions

2.1. Create a custom page

2.2. Module configuration for anchor positioning

For each module that needs to be quickly redirected through the right Directory, turn on the "use unique identifier as DOM ID" option.

2.3. Copy the following code to Page JS and bind the action

// 目录点击
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. Directory settings sticky positioning

When the scroll bar scrolls, the directory can be drawn at the top of the page to improve user experience.

Set the following style to the page, otherwise the sticky positioning will not take effect.

: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. Effect

4. Try it online

示例中心 | 开发者赋能平台

AI智能体时代，全新宜搭。业务创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_NJM7G91B3KVGINCEFKPS&from=yuque_subject