Ссылки привязки Gatsby Smooth Scroll не работают при развертывании на страницах github

Question

У меня есть сайт Гэтсби, который состоит из нескольких страниц. На навигационной панели есть разные ссылки. Некоторые ссылки указывают на разные страницы, в то время как некоторые ссылки приведут вас к конкретному разделу на этой странице с эффектом плавной прокрутки.

Для этого я использовал якорные ссылки Gatsby с плавной прокруткой. Документация находится здесь: https://www.gatsbyjs.org/packages/gatsby-plugin-anchor-links/.

Это в основном то, чего я пытаюсь достичь:

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

Вот фрагмент кода моей навигационной панели:

             <MDBNavItem className="mr-4">
                <AnchorLink to="/#buy-now" 
                 title="Buy AIEOU">
                  <span>Buy AIEOU</span>
                </AnchorLink>
              </MDBNavItem>
              <MDBNavItem className="mr-4">
                <AnchorLink to="/about" title="Our team">
                  <span>About Us</span>
                </AnchorLink>
              </MDBNavItem>

Странно то, что при локальном использовании он полностью работает. Но он больше не работает, когда я развертываю его на страницах Github. Вместо плавной прокрутки он просто телепортируется в этот раздел. Я добавил параметры смещения, а также атрибут StripHash, но он по-прежнему не работает. Любые советы будут оценены.

```

Answer 1

Предполагая, что у вас все хорошо настроено, как кажется, и вы говорите, что он телепортируется в разделы (поведение правильное, эффект - нет), я думаю, вам нужно добавить следующее правило CSS, чтобы добавить плавное поведение:

html,
body {
  scroll-behavior: smooth;
}

Резервный вариант для браузеров: Могу ли я использовать.