【React】页面滚动指定位置

【React】页面滚动指定位置

• js

import React, { Component } from 'react'
import { Button } from 'antd'
import style from './index.module.less'

export default class Page extends Component {
  toLocation = () => {
    const dom = document.getElementById('div3')
    if (dom) {
      dom.scrollIntoView({ behavior: 'smooth', block: 'end' })
    }
  }
  render() {
    return (
      <div className={style.page}>
        <Button onClick={this.toLocation}>跳转按钮</Button>
        <div className="div1"></div>
        <div className="div2"></div>
        <div id={'div3'} className="div3"></div>
        <div className="div4"></div>
      </div>
    )
  }
}

• css

.page {
    :global {
        .div1 {
            width: 200px;
            height: 300px;
            background-color: green;
        }

        .div2 {
            width: 200px;
            height: 300px;
            background-color: red;
        }

        .div3 {
            width: 200px;
            height: 300px;
            background-color: yellow;
        }

        .div4 {
            width: 200px;
            height: 300px;
            background-color: orange;
        }
    }
}