Is it possible using only CSS to make smooth scrolling when clicking an anchor link in react component?
... render( <a href="#smooth-link">Link To There</a> .... <div id="smooth-link"> .... </div> )
Advertisement
Answer
There’s this:
/** * Smooth scrolling inside an element */ #my-element { scroll-behavior: smooth; } /** * Smooth scrolling on the whole document */ html { scroll-behavior: smooth; }
But I feel like JS does a better job:
document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); });
So you could give that a try: docs