•  14-07-2023
  •  | 
  •  

Domanda

This example has a ul navigation at the top left that is fixed, it represents 4 sections; each containing a variable amount of text. I want to know how to manage the HTML/CSS so that whatever section is clicked (1-4) the relevant text for that section is brought to the top regardless of the amount of text in any section. In other words, whatever section is clicked - that section is brought up to the exact same position in the window. So the navigation menu is fixed and when clicked the corresponding section of text is brought to the same exact position and in view.

<!DOCTYPE html>
<html>
    <head>
        <style>

body 
{
    background-color:#F3E2A9;
    font-family: Arial, Helvetica, sans-serif;  
    font-size: 14px;  
    font-weight: normal;  
    font-variant: normal;  
    font-style: normal;  
    line-height: 120%;  
    margin:200px 0px 0px 250px;
    padding:0px 0px 0px 0px;
    max-width:600px;
}  


            #navlist
            {
            position: fixed;
            left: 50px; /**/
            top: 75px;
            }

            #navlist
            {
            padding-left: 0;
            margin-left: 0;
            border-bottom: 1px solid gray;
            width: 150px;
            }

            #navlist li
            {
            list-style: none;
            margin: 0;
            padding: 0.25em;
            border-top: 1px solid gray;
            }


#navlist li a 
{
line-height: 125%;  
text-decoration: none; 
font-family:Arial,Helvetica,sans-serif;
font-size:18px;
font-variant:small-caps;

font-style: bold;  

}


        </style>
    </head>

    <body>

        <ul id="navlist">
        <li><a href="#1">1</a></li>
        <li><a href="#2">2</a></li>
        <li><a href="#3">3</a></li>
        <li><a href="#4">4</a></li>



        </ul>


<a id="1"</a>
<h2>1</h2>
<p>
1Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.

</p>

<a id="2"</a>
<h2>2</h2>
<p>
2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.

2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.
2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.
2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.

2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.
2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.

2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.
2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.


</p>
<a id="3"</a>
<h2>3</h2>
<p>
3Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus  
 Quis fuisset ut has, in sit vero probo, vim in elit inermis expetendis. At veniam nullam eleifend pri. Mel in nusquam conceptam 

referrentur, eos et natum insolens vituperata. In sea alia eruditi, ceteros vivendo est ad. Wisi dicam atomorum eu duo. Quo 

primis dignissim intellegat ex.


</p>
<a id="4"</a>
<h2>4</h2>
<p>
4Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.

</p>
<a id="5"</a>
<h2>5</h2>
<p>
5Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.

</p>

    </body>
</html>
È stato utile?

Soluzione

Just add a larger bottom margin, one that will definitely overlap the page once the page scrolls up when the menu items are clicked

body {
    /* ... */
    margin:200px 0px 2000px 250px;
    /* ... */
}

Additionally, you can apply a top padding to h2 so that it appears exactly at the height you want it:

h2 {    
    padding-top:95px
}

Here is a demo (I cleaned up your code a little bit)

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top