YogeshChauhan . com

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.

dreamhost

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

Can Firewall and IDPS Stop DDoS Attack?MiscLearn to Implement Estimated Reading Time using PHP Part 2: Final Implementation with Source CodePHPWordPress: How to access first and random row values from a repeater field in ACF?WordPressHow to disable right click and drag and drop of images using jQuery?jQueryRIGHT JOIN in PostgresPostgresSolution for the error Commit failed – exit code 1 received in Desktop GithubMiscHow to create a simple text and image slider using CSS and JavaScript?CSSPHP Login System using PDO Part 1: Create User Registration PagePHPA Quick Comparison of JOIN and Subquery in SQLSQL/MySQLShort-Circuit Evaluation in JavaScriptJavaScriptHow to add Lifecycle Methods to a Class in React?ReactSubquery in PostgresPostgres