Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 28 Jul, 2021

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:

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>Scetion 1</h1>
    </section>
    <section id="id2">
        <h1>Scetion 2</h1>
    </section>
    <section id="id3">
        <h1>Scetion 3</h1>
    </section>
    <section id="id4">
        <h1>Scetion 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:

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :