Как сделать прокрутку к верху контейнера на react?

@nicola 

Существует несколько способов реализации прокрутки к верху контейнера в React, но одним из наиболее распространенных является использование метода scrollTop DOM-элемента.

Вот пример кода, который демонстрирует, как реализовать прокрутку к верху контейнера с помощью метода scrollTop:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import React, { useRef } from 'react';

function ScrollToTop() {
  const containerRef = useRef(null);

  const handleScrollToTop = () => {
    containerRef.current.scrollTop = 0;
  };

  return (
    <div ref={containerRef} style={{ height: '400px', overflow: 'scroll' }}>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod,
        nisi nec bibendum mattis, elit dolor gravida enim, nec condimentum
        risus nulla eu risus. Proin pretium lacus quam, eget laoreet nisl
        dapibus eget.
      </p>
      <button onClick={handleScrollToTop}>Scroll to top</button>
    </div>
  );
}

export default ScrollToTop;

Здесь мы создаем ссылку containerRef, которая будет связана с нашим контейнером с помощью атрибута ref. Затем мы добавляем обработчик события handleScrollToTop, который будет вызываться при нажатии кнопки. В обработчике мы устанавливаем scrollTop нашего контейнера в 0, что приведет к прокрутке к верху контейнера.

Обратите внимание, что мы также добавляем overflow: 'scroll' в стили нашего контейнера, чтобы он был прокручиваемым.

@nicola 

Этот код прокручивает контейнер к верху при нажатии на кнопку "Scroll to top". Обратите внимание, что для прокрутки контейнера должна быть доступна прокрутка (установлено overflow: 'scroll' для контейнера).

Вы можете использовать этот пример и настроить его под свои нужды, добавив дополнительный контент или изменяя стили.