How to scroll to particular id component using ant-design steps

Question

I am using ant design steps to make the video progress steps. I want to scroll to the particular video component which matches the step number. Like if I clicked to step 3 then Element with 3rd id should sroll and come at top. This is my code.

I want this to work like this How my scrolling should work

 <Col xl={6} lg={6} md={4} sm={24} xs={24}>
        <Card
          className='fixedDivWrapper'
          style={{ width: "35vh", marginLeft: "5vw", marginBottom: "20vh" }}
        >
          <div
            style={{
              overflow: "auto",
              height: "80vh",
            }}
            id='style'
          >
            <Steps current={current} onChange={onChange} direction='vertical'>
              <Step title='Sans Tutorials 1' />
              <Step title='Sans Tutorials 2' />
              <Step title='Sans Tutorials 3' />
              <Step title='Sans Tutorials 4' />
              <Step title='Sans Tutorials 5' />
              <Step title='Sans Tutorials 6' />
              <Step title='Sans Tutorials 7' />
              <Step title='Sans Tutorials 8' />
              <Step title='Sans Tutorials 9' />
              <Step title='Sans Tutorials 10' />
              <Step title='Sans Tutorials 11' />
              <Step title='Sans Tutorials 12' />
              <Step title='Sans Tutorials 13' />
              <Step title='Sans Tutorials 14' />
            </Steps>
          </div>
        </Card>
      </Col>
      <Col
        style={{ textAlign: "left" }}
        xl={18}
        lg={18}
        md={20}
        sm={20}
        xs={20}
      >
        <Element id='1'>
          <HelpVideo />
        </Element>
        <Element>
          <HelpVideo id='2' />
        </Element>
        <Element>
          <HelpVideo id='3' />
        </Element>
        <Element>
          <HelpVideo id='4' />
        </Element>
        <Element>
          <HelpVideo id='5' />
        </Element>
        <Element>
          <HelpVideo id='6' />
        </Element>
        <Element>
          <HelpVideo id='7' />
        </Element>
        <Element>
          <HelpVideo id='8' />
        </Element>
      </Col>
    </Row>

Use the scrollTop property to scroll the window to the position you want — linchong, Jan 24 '21 at 14:11
Easier is to use the `` tag to set the anchor point. E.g `go somewhere` — linchong, Jan 24 '21 at 14:15

linchong · Answer 1 · 2021-01-24T14:41:16.230

Easier is to use the <a> tag to set the anchor point

<Steps current={current} onChange={onChange} direction='vertical'>
       <Step title='Sans Tutorials 1'><a href="#1">go to id=1</a></Step>
</Steps>

<Element>
       <HelpVideo id='1' />
</Element>

or you can use the scrollTop property to scroll the window to the position you want

if you cant add a a in <step>, you can add a click event to active jump

<Steps current={current} onChange={onChange} direction='vertical'>
       <Step title='Sans Tutorials 1' />
</Steps>

onChange = (e) => {
  if (e === 'some value') {
    window.location.href = '#1' // change there
  }
}

Thanks @linchong but its not working. I don't think I can achieve the desired functionality using ant-design steps — Badal S, Jan 24 '21 at 14:48

score 0 · Answer 2 · answered Jan 02 '23 at 10:42

Check the following two examples.

You can get similar result using <Anchor> Anchor component

App.jsx

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Anchor, Row, Col } from "antd";

const { Link } = Anchor;

const App = () => {
  return (
    <>
      <Row>
        <Col span={5}>
          <Anchor>
            <Link href="#1" title="Sans Tutorials 1" />
            <Link href="#2" title="Sans Tutorials 2" />
            <Link href="#3" title="Sans Tutorials 3" />
            <Link href="#4" title="Sans Tutorials 4" />
          </Anchor>
        </Col>
        <Col span={19}>
          <div id="1" className="tutorial">
            Sans Tutorials 1
          </div>
          <div id="2" className="tutorial">
            Sans Tutorials 2
          </div>
          <div id="3" className="tutorial">
            Sans Tutorials 3
          </div>
          <div id="4" className="tutorial">
            Sans Tutorials 4
          </div>
        </Col>
      </Row>
    </>
  );
};

export default App;

OR

App.jsx

import React from "react";
import "./index.css";
import { Anchor, Row, Col } from "antd";
const App = () => (
  <Row>
    <Col span={5}>
      <Anchor
        items={[
          {
            key: "1",
            href: "#1",
            title: "Sans Tutorials 1"
          },
          {
            key: "2",
            href: "#2",
            title: "Sans Tutorials 2"
          },
          {
            key: "3",
            href: "#3",
            title: "Sans Tutorials 3"
          },
          {
            key: "4",
            href: "#4",
            title: "Sans Tutorials 4"
          }
        ]}
      />
    </Col>
    <Col span={19}>
      <div id="1" className="tutorial">
        Sans Tutorials 1
      </div>
      <div id="2" className="tutorial">
        Sans Tutorials 2
      </div>
      <div id="3" className="tutorial">
        Sans Tutorials 3
      </div>
      <div id="4" className="tutorial">
        Sans Tutorials 4
      </div>
    </Col>
  </Row>
);
export default App;

index.css

.code-box-demo .ant-affix {
  z-index: 11;
}

.tutorial {
  border: 1px solid black;
  padding: 20px;
  height: 300px;
  margin: 5px;
}

Output:

Example 1

Example 2

How to scroll to particular id component using ant-design steps

2 Answers2