Open In App

How to scroll to a particular element or skip the content in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Sometimes we need the user to click on a button or link and take them to an element present on the same HTML page. Also, this needs to take the user to the element without any reload. Lots of times, users tend to skip to the main content, like on a gaming Website. They might want to skip the instructions and want to play the game directly. So, basically, we want to scroll to a particular element or skip to content.

In this article, we will learn how to scroll to a particular element or skip to content in plain HTML and CSS only.

Example 1: In this example, we will see how to scroll a particular element.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,
    initial-scale=1.0" />
    <title>Scroll</title>
    <style>
        section:target {
            border: 2px solid blue;
        }
 
        .links-container {
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
 
<body>
    <div class="links-container">
 
        <!-- The href attribute of anchor
            tags point to the section IDs -->
        <!-- Note that href has to point to IDs
            and not to classes as IDs are
            unique in HTML-->
        <a href="#id1">Go to Section 1</a>
        <a href="#id2">Go to Section 2</a>
        <a href="#id3">Go to Section 3</a>
        <a href="#id4">Go to Section 4</a>
    </div>
 
    <!-- We need to specify unique IDs for
        each section/div/element we want
        the user to scroll to -->
 
    <section id="id1">
        <h1>Section 1</h1>
    </section>
    <section id="id2">
        <h1>Section 2</h1>
    </section>
    <section id="id3">
        <h1>Section 3</h1>
    </section>
    <section id="id4">
        <h1>Section 4</h1>
    </section>
</body>
</html>


Output: Our HTML will look like this in a browser window.

Example 2: Let’s now go ahead and add some styles so that we can have the sections placed far away from each other.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
 
    <style>
 
        /* Some basic styling for
        testing our functionality */
        .links-container {
            display: flex;
            justify-content: space-between;
        }
 
        .sections {
            display: flex;
            flex-direction: column;
            place-items: center;
            gap: 100rem;
        }
    </style>
</head>
 
<body>
    <div class="links-container">
 
        <!-- The href attribute of anchor
            tags point to the section IDs -->
        <a href="#id1">Go to Section 1</a>
        <a href="#id2">Go to Section 2</a>
        <a href="#id3">Go to Section 3</a>
        <a href="#id4">Go to Section 4</a>
    </div>
 
    <!-- We need to specify IDs for each
        section/div/element we want the
        user to scroll to -->
    <div class="sections">
        <section id="id1">
            <h1>Section 1</h1>
        </section>
        <section id="id2">
            <h1>Section 2</h1>
        </section>
        <section id="id3">
            <h1>Section 3</h1>
        </section>
        <section id="id4">
            <h1>Section 4</h1>
        </section>
    </div>
</body>
</html>


Output: Now, when we open our HTML file in a browser, we can see the functionality working when we click on any of the links, i.e. Go to Section 1, Go to Section 2, etc.

Although we are skipping content, the behavior is still not smooth. You can observe that when we click on the links, we go directly to the desired section. But we can make it scroll smoothly to the desired section as well.

To do this, we can use the following line in our code:

scroll-behavior: smooth;

There are other scroll behaviours also defined in HTML, you can go here for details about them. Here, we will be using smooth behaviour. Here, we will use scrolling to the particular section that we want to go, just by clicking once on the link.

The final code will look like this altogether: 

Example 3: In this example, we will see how to scroll a particular element.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>Scroll</title>
 
    <style>
        html {
 
            /* This property makes the html
            page to scroll smoothly */
            /* If you want to directly move to the
            section without scrolling, remove
            this scroll-behavior property*/
            scroll-behavior: smooth;
        }
 
        /* Some basic styling for testing
        our functionality */
        .links-container {
            display: flex;
            justify-content: space-between;
        }
 
        .sections {
            display: flex;
            flex-direction: column;
            place-items: center;
            gap: 100rem;
        }
    </style>
</head>
 
<body>
    <div class="links-container">
 
        <!-- The href attribute of anchor
            tags point to the section IDs -->
        <a href="#id1">Go to Section 1</a>
        <a href="#id2">Go to Section 2</a>
        <a href="#id3">Go to Section 3</a>
        <a href="#id4">Go to Section 4</a>
    </div>
 
    <!-- We need to specify IDs for each
        section/div/element we want the
        user to scroll to -->
    <div class="sections">
        <section id="id1">
            <h1>Section 1</h1>
        </section>
        <section id="id2">
            <h1>Section 2</h1>
        </section>
        <section id="id3">
            <h1>Section 3</h1>
        </section>
        <section id="id4">
            <h1>Section 4</h1>
        </section>
    </div>
</body>
 
</html>


Output: As you can see in the output, we are smoothly scrolling to the sections and skipping the contents as well.



Last Updated : 08 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads