Skip to main content

Command Palette

Search for a command to run...

Smooth Scrolling the document using CSS

Published
1 min read
A
I am a web developer from Navi Mumbai. Mainly dealt with LAMP stack, now into Django and getting into Laravel and Cloud. Founder of nerul.in and gaali.in

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.

144 views