Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to scroll to a particular element or skip the content in CSS?
When visiting certain websites, the user may feel the need to skip the content which is irrelevant and jump right to the content in which the user is interested in and there are many ways to do so in CSS. The user may want to click on a button or maybe link to take them to an element which is present on the same page. The user might be able to want to scroll to a particular element or be able to skip the content.
In this article we are going to have a look at how can we scroll to a particular element or skip a particular piece of content in CSS.
How to scroll to the element or content?
There are various ways to skip the content like we can use the scroll-behaviour property and set its value to smooth so that the scrolling to the top can be smooth but using this property will not give us much control over the scrolling as it will only make the scrolling smooth. We can use the scroll-behaviour property like −
html{
scroll-behaviour: smooth;
}
We can also use another method, and in both these methods we are not focusing on a particular element they just scroll upwards.
<html>
<body>
<a id="to the top"> </a>
<a href="#top"> This will take you to the top of the page</a>
</body>
</html>
The above examples will take you to the top of the page and not a particular element. To skip to a particular element and skip the content let’s look at an example
Example
The approach that we are going to take here will be targeting the content and creating a container which all of our links will be present and in the section part we will use anchor tags along and give them ids so that the anchor tags can point towards them. Let’s look at the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example for scrolling to an element</title>
<style>
.scroll-to {
position: absolute;
top: 1200px;
}
.scroll-btn {
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 20px;
background-color: blue;
color: white;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="content">
<h1>Page Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, metus in facilisis pellentesque, nulla orci tristique dolor, euismod malesuada augue massa ac dolor.</p>
<div class="scroll-to">
<h2>Scroll to me!</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, metus in facilisis pellentesque, nulla orci tristique dolor, euismod malesuada augue massa ac dolor.</p>
</div>
<a href="#" class="scroll-btn" onclick="scrollToTarget()">Scroll</a>
<script>
function scrollToTarget() {
var target = document.querySelector('.scroll-to');
target.scrollIntoView({behavior: 'smooth'});
}
</script>
</body>
</html>
In the output, of the code given above, A heading “page content” and content written under the heading will be there and there will be a button at the bottom right corner of the screen written as “scroll” > you would have to scroll to the bottom of the page where you will see a heading “scroll to me” when you press the button “scroll”, the page will automatically take you to the “page content”.
Example
The approach that we are going to take here will be targeting the content and creating a container which all of our links will be present and in the section part we will use anchor tags along and give them ids so that the anchor tags can point towards them. Let’s look at the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of scrolling to a particular element </title>
<style>
.con{
justify-content: space-between;
display: flex;
}
section:target {
border: solid blue 1px;
}
</style>
</head>
<body>
<div class="con">
<a href="#section1">Go to The Section 1</a>
<a href="#section2">Go to The Section 2</a>
</div>
<section id="section1">
<h2>This is Section 1</h2>
</section>
<section id="section2">
<h2>This is Section 2</h2>
</section>
</body>
</html>
In the output, you can see that there are 2 hyperlinks and whichever of them is clicked a blue border will show up on that particular section indicating that clicking on the hyper link will take the user to the desired element.
Conclusion
When the user wants to skip the content which is irrelevant to him, then he/she might expect to jump straight tot the content which they are interested in. Using the anchor tags and pointing them to the ids of the particular section showed us how can we scroll to the particular element.
In this article we saw how can we scroll to a particular element or skip the content using CSS properties.
293 Views
