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

Question

是否可以仅使用 CSS 在单击 React 组件中的 anchor 链接时进行平滑滚动？

...
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;
}

Source

但我觉得 JS 做得更好:

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

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

所以你可以试一试:docs