Smooth Scrolling the document using CSS

Anjanesh Lekshminarayanan's photo
Anjanesh Lekshminarayanan
·

1 min read

My friend's team recently launched paychexcareers.in for hiring within India. So I was checking out the site's footer which has the famous scroll-to-top button / link.

This is famously done in jQuery using $('html, body').animate({ scrollTop: 0 })

This is the code on that page :

function() {
  $('html, body').animate({
    scrollTop: 0
  }, 1500, 'easeInOutExpo');
  return false;
}

But with modern browsers implementing latest CSS features this can be accomplished using CSS alone via scroll-behavior .

html
{
    scroll-behavior: smooth;
}

This is available in most modern browsers (no IE) but Safari requires version 14.

CSS