单击 react/next.js 上的锚点 link 时平滑滚动

Question

是否可以仅使用 CSS 在 React 组件中单击锚点 link 时平滑滚动？

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

单击 react/next.js 上的锚点 link 时平滑滚动

Smooth scrolling when clicking an anchor link on react/next.js

javascript

css

reactjs

next.js