antd steps步骤条下一步返回到顶部
时间: 2023-08-05 10:02:08 浏览: 200
您可以使用antd Steps组件的`onChange`属性来监听步骤变化,然后在下一步被点击时,使用JavaScript的`window.scrollTo()`方法将页面滚动到顶部。
以下是一个示例代码:
```jsx
import React, { useState } from 'react';
import { Steps, Button } from 'antd';
const { Step } = Steps;
const MySteps = () => {
const [current, setCurrent] = useState(0);
const handleNext = () => {
setCurrent(current + 1);
window.scrollTo(0, 0); // 滚动到顶部
}
return (
<div>
<Steps current={current} onChange={setCurrent}>
<Step title="第一步" />
<Step title="第二步" />
<Step title="第三步" />
</Steps>
<div style={{ marginTop: '16px' }}>
{ current < 2 && <Button type="primary" onClick={handleNext}>下一步</Button> }
{ current === 2 && <Button type="primary">完成</Button> }
</div>
</div>
);
}
export default MySteps;
```
在上面的代码中,我们使用`window.scrollTo(0, 0)`方法将页面滚动到顶部。注意,我们仅在下一步按钮被点击时执行这个方法,而不是每次步骤变化时都执行。
阅读全文