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 “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #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 Validate User Name, Email Address and URL in PHP?PHPHow to embed YouTube or other video links in WordPress?WordPressLearn to create profile card using HTML and CSSCSSIntroduction to Angular modules Part 3: NgModules vs JavaScript modules and Angular librariesAngularPre-defined DatePipe format options in Angular 9AngularKilling A Project Part 1: What criteria should be used to cancel/kill a project?MiscellaneousOOP, Class and Objects Strategies For Beginners (PHP)PHPWordPress: How to access first and random row values from a repeater field in ACF?WordPressSolution for Xcode 11 Command PhaseScriptExecution failed with a nonzero exit code errorMiscellaneousHow to test the WordPress 5.9 Beta 4?WordPressHow to display and animate image on scroll using JavaScript?JavaScriptAlways add associated labels to your Form elementsUI/UX