reactjs - React Type 脚本 Ant 设计步骤设置目标

Question

我创建了 react typescript项目，我正在使用ant design 4 step，我尝试单击第一步并定位一些 div ex：我使用了#oneand id='one'，它的工作但标题部分进入顶部，我想修复标题部分并滚动其他点击后的内容。有人知道苏东吗？

这里是闪电战

代码在这里

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import {
  Anchor,
  Button,
  Card,
  Col,
  Descriptions,
  Drawer,
  Form,
  Input,
  PageHeader,
  Row,
  Spin,
  Steps
} from "antd";
import { Content } from "antd/es/layout/layout";
const { Step } = Steps;
const { Link } = Anchor;
const renderContent = (column = 3) => (
  <Descriptions size="small" column={column}>
    <Descriptions.Item label="Book Number">
      <a>421421</a>
    </Descriptions.Item>
    <Descriptions.Item label="Book Number">
      {" "}
      <a>Avbg Qu</a>
    </Descriptions.Item>
    <Descriptions.Item label="Book NumberNumber">
      <a>2017-01-10</a>
    </Descriptions.Item>
    <Descriptions.Item label="Book Number">
      <a>2017-10-10</a>
    </Descriptions.Item>
    <Descriptions.Item label="Book Number">
      {" "}
      <a>Accounts</a>
    </Descriptions.Item>
    <Descriptions.Item label="Book Number">
      {" "}
      <a>LPGFH</a>
    </Descriptions.Item>
  </Descriptions>
);

ReactDOM.render(
  <div className={"abs-main-body  "}>
    <div>
      <PageHeader
        className="site-page-header-responsive box_shadow margin_bottom_7px "
        title="Enter Fixed Asset Details "
      >
        <Content>{renderContent()}</Content>
      </PageHeader>
    </div>
    <div className={"abs-board-header "}>
      <Row gutter={[8, 8]}>
        <Col span={12}>
          <div className={"ad-side"}>
            <Card
              title="Current Status"
              className="box_shadow"
              style={{ flex: 1, width: "100%" }}
            >
              <Anchor
                style={{ width: "100%" }}
                showInkInFixed={false}
                affix={false}
              >
                <Steps direction="vertical" size="small" current={1}>
                  <Step
                    title={<Link href="#one" title="Invoice Details" />}
                    description="This is a description."
                  />
                  <Step
                    title="In Progress"
                    description="This is a description."
                  />
                  <Step title="Waiting" description="This is a description." />
                  <Step title="Waiting" description="This is a description." />
                  <Step title="Waiting" description="This is a description." />
                  <Step title="Waiting" description="This is a description." />
                  <Step title="Waiting" description="This is a description." />

                  <Step title="Waiting" description="This is a description." />
                  <Step title="Waiting" description="This is a description." />
                  <Step title="Waiting" description="This is a description." />
                  <Step title="Waiting" description="This is a description." />
                  <Step title="Waiting" description="This is a description." />
                  <Step title="Waiting" description="This is a description." />
                </Steps>
              </Anchor>
            </Card>
          </div>
        </Col>
        <Col span={12}>
          <div>
            Section-1
            <br />
            <p>
              n publishing and graphic design, Lorem ipsum is a placeholder text
              commonly used to demonstrate the visual form of a document or a
              typeface without relying on meaningful content. Lorem ipsum may be
              used as a placeholder before final copy is available. n publishing
              and graphic design, Lorem ipsum is a placeholder text commonly
              used to demonstrate the visual form of a document or a typeface
              without relying on meaningful content. Lorem ipsum may be used as
              a placeholder before final copy is available. n publishing and
              graphic design, Lorem ipsum is a placeholder text commonly used to
              demonstrate the visual form of a document or a typeface without
              relying on meaningful content. Lorem ipsum may be used as a
              placeholder before final copy is available.
            </p>
          </div>
          <div>
            Section-2
            <br />
            <p>
              n publishing and graphic design, Lorem ipsum is a placeholder text
              commonly used to demonstrate the visual form of a document or a
              typeface without relying on meaningful content. Lorem ipsum may be
              used as a placeholder before final copy is available. n publishing
              and graphic design, Lorem ipsum is a placeholder text commonly
              used to demonstrate the visual form of a document or a typeface
              without relying on meaningful content. Lorem ipsum may be used as
              a placeholder before final copy is available. n publishing and
              graphic design, Lorem ipsum is a placeholder text commonly used to
              demonstrate the visual form of a document or a typeface without
              relying on meaningful content. Lorem ipsum may be used as a
              placeholder before final copy is available.
            </p>
          </div>
          <div>
            Section-3
            <br />
            <p>
              n publishing and graphic design, Lorem ipsum is a placeholder text
              commonly used to demonstrate the visual form of a document or a
              typeface without relying on meaningful content. Lorem ipsum may be
              used as a placeholder before final copy is available. n publishing
              and graphic design, Lorem ipsum is a placeholder text commonly
              used to demonstrate the visual form of a document or a typeface
              without relying on meaningful content. Lorem ipsum may be used as
              a placeholder before final copy is available.
            </p>
          </div>
          <div>
            Section-4
            <br />
            <p>
              n publishing and graphic design, Lorem ipsum is a placeholder text
              commonly used to demonstrate the visual form of a document or a
              typeface without relying on meaningful content. Lorem ipsum may be
              used as a placeholder before final copy is available. n publishing
              and graphic design, Lorem ipsum is a placeholder text commonly
              used to demonstrate the visual form of a document or a typeface
              without relying on meaningful content. Lorem ipsum may be used as
              a placeholder before final copy is available.
            </p>
          </div>
          <div>
            Section-5
            <br />
            <p>
              n publishing and graphic design, Lorem ipsum is a placeholder text
              commonly used to demonstrate the visual form of a document or a
              typeface without relying on meaningful content. Lorem ipsum may be
              used as a placeholder before final copy is available. n publishing
              and graphic design, Lorem ipsum is a placeholder text commonly
              used to demonstrate the visual form of a document or a typeface
              without relying on meaningful content. Lorem ipsum may be used as
              a placeholder before final copy is available.
            </p>
          </div>
          <div>
            Section-6
            <br />
            <p>
              n publishing and graphic design, Lorem ipsum is a placeholder text
              commonly used to demonstrate the visual form of a document or a
              typeface without relying on meaningful content. Lorem ipsum may be
              used as a placeholder before final copy is available. n publishing
              and graphic design, Lorem ipsum is a placeholder text commonly
              used to demonstrate the visual form of a document or a typeface
              without relying on meaningful content. Lorem ipsum may be used as
              a placeholder before final copy is available. n publishing and
              graphic design, Lorem ipsum is a placeholder text commonly used to
              demonstrate the visual form of a document or a typeface without
              relying on meaningful content. Lorem ipsum may be used as a
              placeholder before final copy is available.
            </p>
          </div>
          <div id="one">
            Section-7
            <br />
            <p>
              n publishing and graphic design, Lorem ipsum is a placeholder text
              commonly used to demonstrate the visual form of a document or a
              typeface without relying on meaningful content. Lorem ipsum may be
              used as a placeholder before final copy is available. n publishing
              and graphic design, Lorem ipsum is a placeholder text commonly
              used to demonstrate the visual form of a document or a typeface
              without relying on meaningful content. Lorem ipsum may be used as
              a placeholder before final copy is available. n publishing and
              graphic design, Lorem ipsum is a placeholder text commonly used to
              demonstrate the visual form of a document or a typeface without
              relying on meaningful content. Lorem ipsum may be used as a
              placeholder before final copy is available.v
            </p>
          </div>
        </Col>
      </Row>
    </div>
  </div>,
  document.getElementById("container")
);

标签： reactjstypescriptantd