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

16 Jun, 2022
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>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:
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.
sumitgumber28
CSS-Properties
CSS-Questions
HTML-Tags
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS