CSS How to scroll to a specific element or skip content
How to Scroll to a Specific Element or Skip Content with CSS
When visiting certain websites, users may feel the need to skip past irrelevant content and jump directly to the content they’re interested in. There are many ways to do this in CSS. Users may want to click a button or link that takes them to an element on the same page. Users may also want to scroll to a specific element or be able to skip content.
In this article, we’ll look at how to scroll to a specific element or skip content in CSS.
How to scroll to an element or content
There are many ways to skip content. For example, we can use the scroll-behaviour property and set its value to smooth to scroll to the top. However, using this property doesn’t give us much control because it only makes the scrolling smooth. We can use the scroll-behaviour attribute, for example
html{
scroll-behaviour: smooth;
}
We can also use another approach. In both approaches, we don’t focus on a specific element; they simply scroll up.
<html>
<body>
This will take you to the top of the page
</body>
</html>
The above example will take you to the top of the page, not to a specific element. To jump to a specific element and skip the content, let’s look at an example.
Example
The approach we’re going to take here is to target the content, creating a container where all of our links will appear. Within the content section, we’ll use anchor tags and give them IDs so that the anchors can point to them. Let’s take a 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>
Scroll
<script>
function scrollToTarget() {
var target = document.querySelector('.scroll-to'); target.scrollIntoView({behavior: 'smooth'});
}
</script>
</body>
</html>
In the output of the above code, there will be a title “Page Content” and the content written under the title. In the bottom right corner of the screen there will be a button that says “Scroll.” You will have to scroll to the bottom of the page where you will see a title “Scroll to Me.” When you press the “Scroll” button, the page will automatically take you to “Page Content.”
Example
The approach we’re going to take here is to target the content and create a container where all our links will appear. In the section section, we’ll use anchor tags and give them an ID so that the anchor tag can point to them. Let’s take a 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">
Go to The Section 1
Go to The Section 2
</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 two hyperlinks. No matter which one you click, a blue border will appear around that specific section, indicating that clicking the hyperlink will take the user to the desired element.
Conclusion
When a user wants to skip content that’s irrelevant to them, they might want to jump directly to the content they’re interested in. Using an anchor tag and pointing it to a specific section ID shows how to scroll to a specific element.
In this article, we saw how to use CSS properties to scroll to a specific element or skip content.