How to create a smooth scrolling effect using CSS ? Last Updated : 26 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Smooth scrolling is employed on web pages to enhance the user experience by providing a visually appealing and seamless transition between different sections of the page. It improves readability and enhances navigation. Using the CSS property scroll-behaviour we can achieve the smooth scrolling effect.PreviewApproachCreate the basic structure of the web page using <nav>, <a>, <section> and <p> elements in the HTML document file. The element <body> contains properties like margin: 0 that removes default margin and scroll-behavior: smooth that enables smooth scrolling behavior.The element <nav> contains the style background-color, padding:20px, and text-decoration: none that removes underlines from links.The element <section> contains the style padding: 50px that adds padding to each section, text-align: center that Centers text within sections, and min-height: 400px;: Sets a minimum height for sections.Four sections with unique IDs (#home, #about, #contacts, #courses) that will be used as value for <a> element to provide scroll behaviour. Each section contains an <h2> heading and a <p> paragraph with specific content.Example: Illustration of smooth scrolling effect using CSS. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width,initial-scale=1.0"> <title>Smooth Scrolling Effect </title> <style> body { margin: 0; font-family: Arial, sans-serif; scroll-behavior: smooth; } nav { background-color: #207217; padding: 20px; text-align: center; } nav a { color: #fff; text-decoration: none; margin: 0 15px; } section { padding: 50px; text-align: center; min-height: 400px; } #home { background-color: #f2f2f2; } #about { background-color: #ffc107; } #contacts { background-color: #28a745; color: #fff; } #courses { background-color: #007bff; color: #fff; } </style> </head> <body> <nav> <a href="https://www.geeksforgeeks.org/"> GeeksforGeeks </a> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contacts">Contacts</a> <a href="#courses">Courses</a> </nav> <section id="home"> <h2>Home Section</h2> <p>Welcome to GeeksforGeeks!</p> </section> <section id="about"> <h2>About Section</h2> <p> DSA is defined as a combination of two separate yet interrelated topics – Data Structure and Algorithms. </p> </section> <section id="contacts"> <h2>Contact Us</h2> <p> geeksforgeeks-footer-logo A-143, 9th Floor, Sovereign Corporate Tower, Sector-136, Noida, Uttar Pradesh - 201305 </p> </section> <section id="courses"> <h2>Our Courses</h2> <p>DSA, MERN</p> </section> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Create a Smooth Scrolling Effect with CSS? S shivanigupta18rk Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to Create a Smooth Scrolling Effect with CSS? To create a smooth scrolling effect with CSS, use the scroll-behavior: smooth property. This enables smooth transitions between sections of a webpage, offering a more seamless and polished experience for users.Instead of jumping from one section to another, smooth scrolling ensures gentle transition 6 min read How to Create a Custom Scrollbar using CSS? Scrollbars are common graphical user interface elements that allow users to navigate content beyond the visible area. By default, web browsers provide basic scrollbars with a predefined style. However, using HTML and CSS, you can customize the scrollbar to match your website's design better.Scrollba 4 min read How to Create a Sliding Background Effect Using CSS ? A sliding background effect in CSS creates a smooth, continuous movement of a webpage’s background image, typically in a horizontal or vertical direction. It gives a dynamic, animated feel by using properties like background-position and animation, enhancing visual engagement without additional Java 2 min read How to create a marquee effect using CSS ? In this article, we will be creating the marquee effect by using HTML and CSS. This effect can be created by using the <marquee> tag in HTML, but we will not use this tag as it is not widely used nowadays. We will create and design a marquee effect by using the CSS classes and styling properti 2 min read Create a Reverse Scrolling Effect using HTML and CSS Creating an attractive UI with a reverse scroll effect can be an engaging design. The Reverse Scrolling effect facilitates a unique and visually interactive experience for users, which breaks the conventional top-down scrolling system to which the user is accustomed. In this article, we'll create a 2 min read How to create a bounce in and out on scroll effect using CSS ? Creating a bounce in and out on the scroll effect can add an exciting and engaging touch to your web design. This effect creates a bouncing animation when the user scrolls down the page, and then bounces back when the user scrolls up. In this article, we will discuss the syntax and approaches to cre 3 min read Like