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.

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

What is a component helper function in React?ReactWhat are “holes” in a React component?ReactHow Routing works in Angular?AngularHow to create a dynamic countdown using HTML and JavaScript?HTMLUse inline if to make a shorter conditional syntax in ReactReactLearn to Make a Simple Contact Us Form using PHP and PDO-MySQLPHP5 Key Principles Of Good Website UsabilityUI/UXWindow setInterval() Method in JavaScriptJavaScriptIf statement shorthand examples in JavaScriptJavaScriptFull and Partial CUBE in Postgres with ExamplesPostgresClearwater Seafoods – B2C in ChinaMiscQuick Introduction to 11 Array Iteration Methods in JavaScriptJavaScript