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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #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
Social Media Colors: LESS VariablesMiscellaneousWhat is Object Mutability in JavaScript?JavaScriptWhat Does Host-Based Intrusion Detection System (HIDS) Mean and What Are Some Advantages Over NIDS?MiscellaneousDid you get an error while displaying Special Characters in JavaScript?JavaScriptSQL ANY OperatorSQL/MySQLHow to create a multisite network in WordPress?WordPressCreate a simple bar chart and column chart using pure CSS gridCSSHow to implement NSNumberFormatter in Swift for currency?SwiftHow to center an image horizontally and vertically?CSSWhat are Class Constants in PHP?PHPThe Types of DatabasesMiscellaneousPHP arrays for US states’ full names and abbreviationsPHP