В этой статье вы узнаете, как создавать ссылки с плавной прокруткой в GatsbyJS, которые работают с элементом Gatsby ‹Link› и сохраняют совместимость с историей браузера.
Предполагается, что у вас уже есть сайт Gatsby и вы знакомы с JavaScript и HTML. Если вы этого не сделаете, вы можете создать стартовый сайт с помощью инструмента Gatsby CLI: https://www.gatsbyjs.org/docs/starters/
Шаг 1. Добавьте свойство id к объекту, который нужно прокрутить
Шаг 2. Добавьте hashtag к свойству to в вашем компоненте Gatsby <Link>, который соответствует id на вашей цели
Шаг 3. Установите библиотеку smooth-scroll react из NPM.
npm install smooth-scroll
Шаг 4. Требуйте и прикрепите библиотеку smooth-scroll к любому тегу привязки, содержащему хэштег. Вы можете сделать это в любом файле, который загружается на каждой странице, например layout.js.
Шаг 5. Наслаждайтесь плавной прокруткой ссылок на своем сайте Gatsby 🎉 🎉 🎉
Демо
Https://chrisfitkin.github.io/gatsby-smooth-scroll-demo/
