Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to scroll to a particular element or skip the content in CSS?
When visiting websites, users often need to skip irrelevant content and jump directly to sections they're interested in. CSS provides several methods to enable smooth scrolling to specific elements on the same page, improving user navigation and experience.
Syntax
/* CSS scroll behavior */
html {
scroll-behavior: smooth;
}
/* Target pseudo-class for highlighting */
section:target {
/* styles for targeted element */
}
Method 1: Using CSS scroll-behavior Property
The scroll-behavior property enables smooth scrolling when navigating to anchor links. This method works with simple anchor navigation
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
.content {
height: 800px;
padding: 20px;
background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
}
.target-section {
background-color: #4CAF50;
color: white;
padding: 20px;
margin-top: 100px;
text-align: center;
}
.nav-link {
position: fixed;
top: 20px;
right: 20px;
background-color: #2196F3;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="content">
<h1>Page Content</h1>
<p>Scroll down to see more content...</p>
<div id="target" class="target-section">
<h2>Target Section</h2>
<p>You've scrolled to this section!</p>
</div>
</div>
<a href="#target" class="nav-link">Go to Target</a>
</body>
</html>
A page with content and a blue "Go to Target" button in the top-right corner. Clicking the button smoothly scrolls to the green target section.
Method 2: Using CSS :target Pseudo-class
The :target pseudo-class allows you to style elements when they become the target of an anchor link, providing visual feedback
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
.navigation {
display: flex;
justify-content: space-around;
background-color: #333;
padding: 15px;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
.navigation a {
color: white;
text-decoration: none;
padding: 8px 16px;
border-radius: 4px;
}
.navigation a:hover {
background-color: #555;
}
section {
padding: 80px 20px 20px;
margin: 20px 0;
background-color: #f9f9f9;
min-height: 400px;
transition: all 0.3s ease;
}
section:target {
background-color: #ffeb3b;
border-left: 5px solid #ff9800;
transform: scale(1.02);
}
</style>
</head>
<body>
<nav class="navigation">
<a href="#section1">Go to Section 1</a>
<a href="#section2">Go to Section 2</a>
<a href="#section3">Go to Section 3</a>
</nav>
<section id="section1">
<h2>Section 1</h2>
<p>This is the first section. Click navigation links to jump to different sections.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>This is the second section with some content.</p>
</section>
<section id="section3">
<h2>Section 3</h2>
<p>This is the third section at the bottom.</p>
</section>
</body>
</html>
A page with fixed navigation at the top containing three links. Each section is highlighted with yellow background and orange border when targeted, with smooth scrolling between sections.
Key Points
- The
scroll-behavior: smoothproperty enables smooth scrolling for anchor navigation - The
:targetpseudo-class styles elements when they become link targets - Anchor links use the
href="#id"format to target specific elements - Combine both techniques for enhanced user experience with visual feedback
Conclusion
CSS provides effective methods for scrolling to specific elements using scroll-behavior and :target pseudo-class. These techniques improve navigation and help users skip to relevant content sections efficiently.
Updated on: 2026-03-15T16:08:42+05:30
553 Views
Advertisements