Smooth Scrolling with Minimal Effort

javascript

Sometimes, web designs feature a small mouse or arrow in the page header. When clicked, it navigates or scrolls the user downwards. I use this simple, small snippet to achieve that.

/**
* Function to scroll to main part of content. Use .js_read_more class.
*/
document.querySelector('.js_read_more')?.addEventListener('click', () => {
  window.scrollTo({
    top: document.querySelector('main').offsetTop,
    behavior: 'smooth'
  });
})