单击react/next.js 上的锚链接时平滑滚动

Question

单击反应组件中的锚链接时，是否可以仅使用 CSS 来实现平滑滚动？

...
render(
    <a href="#smooth-link">Link To There</a>
    ....
    <div id="smooth-link">
        ....
    </div>
)

Answer 1

有这个：

/**
 * Smooth scrolling inside an element
 */
#my-element {
    scroll-behavior: smooth;
}

/**
 * Smooth scrolling on the whole document
 */
html {
    scroll-behavior: smooth;
}

来源

但我觉得 JS 做得更好：

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

所以你可以尝试一下：文档

Answer 2

我正在使用tailwindcss，但它也可以在没有 tailwindcss 的情况下工作。您只需要添加scroll-behavior:smoothforhtml标签即可。转到.css项目中的全局文件。在顶部添加这一行。

html {
  scroll-behavior: smooth;
}