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.

Syntax


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

Where, 

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 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #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
Is there a CSS parent selector?CSSHow to zoom an element on hover using CSS?CSSHow to display random posts in WordPress?WordPressHow to create bouncing balls using HTML canvas and JavaScript?HTMLHow to add a Line Chart in Angular App?AngularHow to remove trailing characters from a string using JavaScript?JavaScriptHow does Binding work in JavaScript?JavaScriptHow to remove special characters (dash, asterisk etc) from any string in PHP?PHPMicroservices vs Monolithic ArchitectureMiscellaneousHow to disable the Recovery Mode in WordPress?WordPressHow to control file extensions with an .htaccess file?MiscellaneousThe simple difference between var, let and const in JavascriptJavaScript