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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

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 Commit and Rollback Changes in SQL?SQL/MySQLWordPress: How to loop through a repeater field in ACF?WordPressHow to list all PHP variables to debug the script?PHPHow states work in React?ReactHow can one check to see if a remote file exists using PHP?PHPHow to scroll contents of HTML body horizontally and vertically using JavaScript?JavaScriptHow to get Current Year, Month and Date in JavaScript?JavaScriptSteps to Secure a VPNMiscellaneous2 Ways We Can Write Multiple Line Commands in PHPPHPSolution for the error Commit failed – exit code 1 received in Desktop GithubMiscellaneousHow to add Google Static Map using ACF map field?WordPressList of social media icon logo color codes in HEXMiscellaneous