ページアンカーの配置、上部への戻り、粘性の配置をカスタマイズします

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

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

1. 使用シーン

長いwebコンテンツでは、ユーザーが参照する部分をすばやく見つけることができますより良いユーザー体験を提供するために、「トップに戻る」ボタンを追加しますアンカーリンクを使用して、ユーザーをページの上部にすばやく戻します。

2. 機能を実現する

2.1. カスタムページの作成

2.2. アンカーポイントの位置付けが必要なモジュール構成

右側のディレクトリからすばやくジャンプする必要があるモジュールごとに、「一意のidを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;
  }
}