React-scroll - популярная библиотека, используемая для прокрутки, на GitHub с более чем 335 тыс. Загрузок еженедельно (на данный момент) на NPM, у нее много участников. С помощью этой библиотеки плавная прокрутка становится тривиальной и простой в реализации, при этом она удобна для мобильных устройств. В настоящее время HTML мгновенно переходит к привязке раздела, который вы бы щелкнули, а не плавно, с этой библиотекой это станет намного проще. Давайте начнем!

Позволяет настроить

Я собираюсь использовать приложение npx create-response-app, чтобы продемонстрировать эту демонстрацию. Начните с загрузки пакета response-scroll

npm install react-scroll

Мы будем использовать компонент Link из response-scroll, он позволяет нам обернуть нашу навигацию этим компонентом и иметь некоторые параметры для настройки прокрутки и различных других аспектов.

Реализация

Это очень просто: с помощью компонента ссылки мы заменяем тег ‹a› и используем тег ‹Link› из response-scroll. Теперь есть больше опций, чем просто плавная прокрутка, например задержка, продолжительность и смещение, а также различные компоненты для настраиваемых элементы, события и прокрутка. Вы можете ознакомиться с документацией по адресу: https://www.npmjs.com/package/react-scroll