Anchor 锚点

基本使用

tsx

import { Anchor } from "@lite-code/pro-shineout";

const bStyle = {
  fontSize: 14,
  marginTop: 4,
  display: "block",
};

const AnchorDemo = () => {
  return (
    <div style={{ display: "flex", gap: "20px" }}>
      <div style={{ width: "120px", flexShrink: 0 }}>
        <Anchor
          items={[
            {
              key: "section-1",
              title: "第一部分",
              children: [
                { key: "section-1-1", title: "1.1 子章节" },
                { key: "section-1-2", title: "1.2 子章节" },
              ],
            },
            {
              key: "section-2",
              title: "第二部分",
              children: [
                { key: "section-2-1", title: "2.1 子章节" },
                { key: "section-2-2", title: "2.2 子章节" },
              ],
            },
            {
              key: "section-3",
              title: "第三部分",
            },
            {
              key: "section-4",
              title: "第四部分",
            },
          ]}
          container="#scroll-container"
          offsetTop={20}
        />
      </div>
      <div
        id="scroll-container"
        style={{
          flex: 1,
          height: "400px",
          overflow: "auto",
        }}
      >
        {/* 第一部分 */}
        <div id="section-1" style={{ marginBottom: "40px" }}>
          <b style={bStyle}>第一部分</b>
          <p>这是第一部分的内容。当用户滚动到这里时，左侧的锚点会自动高亮。</p>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>

          <div id="section-1-1" style={{ marginTop: "30px" }}>
            <b>1.1 子章节</b>
            <p>这是第一部分的第一个子章节。</p>
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
          </div>

          <div id="section-1-2" style={{ marginTop: "30px" }}>
            <b>1.2 子章节</b>
            <p>这是第一部分的第二个子章节。</p>
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
          </div>
        </div>

        {/* 第二部分 */}
        <div id="section-2" style={{ marginBottom: "40px" }}>
          <b style={bStyle}>第二部分</b>
          <p>这是第二部分的内容。点击左侧锚点可以快速跳转到这里。</p>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>

          <div id="section-2-1" style={{ marginTop: "30px" }}>
            <b>2.1 子章节</b>
            <p>这是第二部分的第一个子章节。</p>
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
          </div>

          <div id="section-2-2" style={{ marginTop: "30px" }}>
            <b>2.2 子章节</b>
            <p>这是第二部分的第二个子章节。</p>
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
          </div>
        </div>

        {/* 第三部分 */}
        <div id="section-3" style={{ marginBottom: "40px" }}>
          <b style={bStyle}>第三部分</b>
          <p>这是第三部分的内容。</p>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>

        {/* 第四部分 */}
        <div id="section-4" style={{ marginBottom: "140px" }}>
          <b style={bStyle}>第四部分</b>
          <p>这是第四部分的内容。</p>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
      </div>
    </div>
  );
};

export default AnchorDemo;