CSS Scroll-Behavior
CSS Scroll Behavior is a useful
property that allows you to control the smoothness and speed of scrolling
interactions on your web pages. By utilizing the scroll-behavior property, you can enhance the user experience by providing smooth
transitions when navigating between sections of your content. This guide will
walk you through everything you need to know about implementing scroll behavior
in CSS, including syntax, browser support, and real-world use cases.
In this section, we’ll cover the following topics:
- What Is CSS Scroll Behavior?
- Utilizing Scroll Behavior with AI
- Best Practices for CSS Scroll Behavior
What Is CSS Scroll Behavior?
CSS Scroll Behavior is a CSS property that allows you to define how scrolls should happen, either automatically or smoothly. This property comes in handy when dealing with anchor links or when programmatically scrolling the page by enhancing the scrolling experience to be more user-friendly and visually appealing.
Why Use Scroll Behavior in Web Design?
In web design, scroll behavior can significantly improve navigation and user interaction, particularly in long web pages with internal links. The use of scroll behavior ensures a smoother transition between different sections of a page, offering a more polished and professional user experience.
Scroll Behavior Use Cases
Scroll behavior is particularly useful in the following scenarios:
- Enhancing navigation between page sections using internal links
- Improving user experience in single-page websites with long scrolling content
- Programmatically controlling scroll actions using JavaScript
Syntax and Values of scroll-behavior
The scroll-behavior property can be applied to the HTML element or scrollable elements.
The main values for this property are:
-
auto: The default behavior, where scrolling happens instantly without smooth transition. -
smooth: Enables smooth scrolling, making transitions between different parts of the webpage slower and more controlled.
Example:
html {
scroll-behavior: smooth;
}
Browser Support and Compatibility for CSS Scroll Behavior
Most modern browsers support
the scroll-behavior property, including Chrome, Firefox, and Edge. However, you should be
aware that not all older browsers, particularly Internet Explorer, fully
support this property, so it’s essential to account for compatibility when
implementing it in your designs.
Utilizing Scroll Behavior with AI
Leveraging AI tools can streamline the process of generating CSS and HTML code for scroll behavior. With AI-generated prompts, you can quickly implement smooth scrolling or scroll behavior for anchor links, saving time and effort.
Preparing for Practice Files
This course takes a hands-on approach, allowing you to apply the techniques covered in real-world scenarios. We'll be using a structured folder layout. Before proceeding with the examples, please ensure the following files are prepared:
/your-project-folder/
├── 06-04-css-scroll-behavior/ (<- sub-folder)
├── example-1.css
├── example-1.html
├── example-2.css
├── example-2.html
For your convenience, these files are also available on our GitHub repository. You can download the practice files to follow along with the case studies presented in this guide.
AI Case 1: Smooth Scrolling for Web Page Sections
Smooth scrolling allows for visually smooth transitions between sections of a webpage, improving the user experience. This example demonstrates smooth scrolling between five sections, each with a different background color to make the effect clear.
Sample AI prompt:
Generate HTML and CSS code for a web page with 5 sections, each with a different background color. Apply smooth scrolling behavior to the page using the scroll-behavior: smooth property on the html element. Make sure each section is full viewport height (100vh) and add proper padding so the fixed navigation bar doesn’t overlap the section headings.
Sample code output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Smooth Scrolling Web Page</title>
<link rel="stylesheet" href="example-1.css" />
</head>
<body>
<nav>
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
<a href="#section4">Section 4</a>
<a href="#section5">Section 5</a>
</nav>
<div id="section1" class="section">
<h2>Section 1</h2>
</div>
<div id="section2" class="section">
<h2>Section 2</h2>
</div>
<div id="section3" class="section">
<h2>Section 3</h2>
</div>
<div id="section4" class="section">
<h2>Section 4</h2>
</div>
<div id="section5" class="section">
<h2>Section 5</h2>
</div>
</body>
</html>
html {
scroll-behavior: smooth; /* Apply smooth scrolling */
}
body {
font-family: Arial, sans-serif;
margin: 0;
}
nav {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
padding: 10px;
text-align: center;
z-index: 1;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
.section {
height: 100vh; /* Full viewport height for each section */
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
color: white;
padding-top: 50px; /* To account for the fixed nav */
box-sizing: border-box;
}
#section1 {
background-color: lightcoral;
}
#section2 {
background-color: lightseagreen;
}
#section3 {
background-color: lightblue;
}
#section4 {
background-color: lightgoldenrodyellow;
color: black;
}
#section5 {
background-color: lightpink;
}
Instructions to see the results:
- Save the code above in
example-1.htmlandexample-1.cssin the06-04-css-scroll-behaviorfolder. - Open
example-1.htmlin your browser to view the smooth scrolling in a vertical container.
Watch this video to see what it looks like.
Visit this link to see how it
looks in your web browser:
Demo Web Page 107
AI Case 2: Adding a Back To Top Button
In this case, we enhance the web page by adding a “Back to Top” button that appears at the bottom right of the page. This button provides users with a convenient way to quickly return to the top of the page after scrolling through multiple sections.
Sample AI prompt:
For the Case 1 HTML and CSS code, add a ‘Back To Top’ button at the bottom right of the page. Ensure that the button remains fixed while scrolling and smoothly scrolls the user back to the top when clicked.
Sample code output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Smooth Scrolling with Back to Top Button</title>
<link rel="stylesheet" href="example-2.css" />
</head>
<body>
<nav>
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
<a href="#section4">Section 4</a>
<a href="#section5">Section 5</a>
</nav>
<div id="section1" class="section">
<h2>Section 1</h2>
</div>
<div id="section2" class="section">
<h2>Section 2</h2>
</div>
<div id="section3" class="section">
<h2>Section 3</h2>
</div>
<div id="section4" class="section">
<h2>Section 4</h2>
</div>
<div id="section5" class="section">
<h2>Section 5</h2>
</div>
<!-- Back to Top Button -->
<button id="backToTop">Back to Top</button>
<script>
// Smooth scroll back to top
document
.getElementById("backToTop")
.addEventListener("click", function () {
window.scrollTo({
top: 0,
behavior: "smooth",
});
});
</script>
</body>
</html>
html {
scroll-behavior: smooth; /* Ensure smooth scrolling */
}
body {
font-family: Arial, sans-serif;
margin: 0;
}
nav {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
padding: 10px;
text-align: center;
z-index: 1;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
.section {
height: 100vh; /* Full viewport height for each section */
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
color: white;
padding-top: 50px; /* To account for the fixed nav */
box-sizing: border-box;
}
#section1 {
background-color: lightcoral;
}
#section2 {
background-color: lightseagreen;
}
#section3 {
background-color: lightblue;
}
#section4 {
background-color: lightgoldenrodyellow;
color: black;
}
#section5 {
background-color: lightpink;
}
/* Back to Top Button */
#backToTop {
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 15px;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#backToTop:hover {
background-color: darkred;
}
Instructions to see the results:
- Save the code above in
example-2.htmlandexample-2.cssin the06-04-css-scroll-behaviorfolder. - Open
example-2.htmlin your browser to view the smooth scroll behavior when clicking anchor links.
Watch this video to see what it looks like.
Visit this link to see how it
looks in your web browser:
Demo Web Page 108
Best Practices for CSS Scroll Behavior
CSS scroll behavior can greatly enhance user experience by creating smoother transitions between sections. Below are key practices to help you implement scroll behavior effectively.
-
Choose Smooth Scrolling for Better UX: Apply
scroll-behavior: smoothon the HTML element to provide visually pleasing, gradual scroll transitions. This is particularly helpful for anchor link navigation within long pages. -
Consider Compatibility: Modern
browsers like Chrome, Firefox, and Edge support the
scroll-behaviorproperty, but older browsers, especially Internet Explorer, do not. Check browser compatibility to ensure your design is consistent across platforms. - Optimize for Single-Page Applications: In single-page layouts, smooth scrolling can improve navigation by making transitions between sections more intuitive. Use it when you have lengthy scrolling content or fixed navigation to enhance readability.
-
Use JavaScript for Advanced Control: For complex scroll scenarios, combine
scroll-behavior: smoothwith JavaScript. This approach enables precise control, such as when triggering smooth scrolling to specific elements on user action (e.g., a “Back to Top” button). - Balance Performance and Aesthetics: While smooth scrolling improves aesthetics, it may impact performance on older devices or large pages. Use it selectively to maintain a responsive and smooth user experience.
These best practices ensure a polished, user-friendly interface with CSS scroll behavior. Implementing them thoughtfully can make navigation seamless and visually appealing.
More Topics to Explore
Chapter 2. Preparing for Website Coding
Combine Table Cells
font-size
