Переход к разделу страницы с использованием сценария Java

Question

У меня есть веб-страница с несколькими компонентами, которая выглядит следующим образом:

<div id='someId' ...... />

Вручную можно перейти к этим разделам, используя

<a href="#someId" .....  />

Как, используя es2015, реагировать или javascript, можно создать функцию для перехода к этому компоненту <div>?

Answer 1

Если вы не против установить сторонний пакет, я бы предложил попробовать react-scroll-into-view

Answer 2

Вы можете использовать функцию scrollIntoView .

document.getElementById('someId').scrollIntoView();

Пример ответа ( CodeSandbox )

class App extends React.Component {
  onClick = () => {
    this.ref.scrollIntoView();
  };
  render() {
    return (
      <div>
        <button onClick={this.onClick}>Scroll down</button>
        <div style={{ height: 1000 }}>Hello CodeSandbox</div>
        <div style={{ height: 1000 }} ref={ref => (this.ref = ref)}>
          Scroll here
        </div>
      </div>
    );
  }
}