Yogesh Chauhan's Blog

How to create a smooth scrolling effect with CSS?

in CSS on October 17, 2020

We can create smooth scrolling effect with CSS scroll-behavior Property.

This is how we can use it:

html {
  scroll-behavior: smooth;

When we click on in-page link, the browser will directly jump to that section/part but if we add the code above then the rather than jump, the scrolling will be smooth.


scroll-behavior: auto or smooth or initial or inherit;


auto will create a straight jump,

smooth will create a smooth animation,

initial will set the value to it's initial value and

inherit will set the value to it's parent's value.

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to use GROUPING SETS to boost GROUP BY queries in Postgres?PostgresHow to render Lists in React?ReactRIGHT JOIN in PostgresPostgresHow to modify AutoSave Interval using code in WordPress?WordPressSQL ANY OperatorSQL/MySQLCreate a menu with a curtain falling animation using CSS and JavaScriptCSSThe Drupal flowDrupalapply_filters function in WordPressWordPressHow to control file extensions with an .htaccess file?MiscellaneousHow to add a new role in WordPress?WordPressIntroduction to Angular modules Part 3: NgModules vs JavaScript modules and Angular librariesAngularHow to Block IPs and User Agents using code in Drupal or WordPress?Drupal