How to create a smooth scrolling effect with CSS?
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.


Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS Mar 2 WordPress: How to access first and random row values from a repeater field in ACF? Mar 1 The basics of CSS Box model Feb 27 WordPress: How to display slider repeater fields in ACF? Feb 26 Simple Page Hit Counter in PHP

You might also like these

Introduction to Angular modules Part 2: NgModules and componentsAngularHow to remove border from :visited image, link or button?CSSSQL GROUP BY StatementSQL/MySQLWordPress: How to get ACF field values from another post?WordPressHow to uninstall Cocoapods from the Mac OS?Miscperspective property in CSSCSSHow to add a ribbon inside a container using CSS?CSSHow to use HTML picture Tag?HTMLCan We Use For Loop to Loop Through Associative Arrays in PHP?PHPHow to verify your domain in Google Console with a TXT record?MiscHow to create a new HTML element programmatically using JavaScript?HTMLFlash of Invisible Text and Mitt Romney Web Font ProblemCSS