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 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
HAVING Clause in Postgres with Examples in All Aggregate FunctionsPostgres@mixin and @include in SCSS (Sass)SCSSSolution to pod install fails with json error on Mac OS X 10.15 (or Mac OS Catalina)MiscellaneousWhat are Controlled Components in React?ReactHow to create ‘share on LinkedIn’ link using just HTML?HTMLIntroduction to components and templates Part 2: Templates and viewsAngularHow to check if radio button is checked or not using JavaScript?JavaScriptHow to add Date and Time picker in HTML and get the values using JavaScript?HTMLCreate a menu with a curtain falling animation using CSS and JavaScriptCSSSolution to Precision Problem in JavaScript NumbersJavaScriptHow to Install PHP Laravel on MacOS Catalina?PHPHow to define variables in SCSS (Sass)?SCSS