CSS Smooth Scroll Behavior
- 1 minute
<a href="#some-content">jump to some content</a>
With this little bit of HTML the user can click the link and have the page jump to the
some-content paragraph below. This jumping effect can be a helpful shortcut but also jarring to suddenly move to a completely different part of the page. To make this a better experience we can add the following CSS:
const button = document.querySelector('button');
button.addEventListener('click', () => window.scrollTo(0, 1400));
The browser support for CSS Scroll Behavior is pretty good, as it works in the next version of Edge, Chrome and Firefox. You can try it here, jump back to the top. You can also checkout the a full working demo in the link below!