Как сделать якорь на footer?

Question

Павел migelonio @migelonio-codeman

JavaScript ➡️ C# ➡️ Python

HTML

Как сделать якорь на footer?

У меня на странице есть footer. Я сделал для него ссылку-якорь, но она не работает. Хотя ссылка-якорь на другой footer(который находится ниже первого) работает. Что не так?

<body>
    <header><big>PhotoLi</big></header>

    <!-- scrollDownBtn -->

    <big>


        <h3 id="main2">PhotoLi - we TAKE photos</h3>
        <a id="linkToStart" href=#footer>⁖ How we started </a>
        <a id="linkToServices" href=#footer2>⁖ Our services</a>


        <big>
            <main>
                <div class="mainInfo">
                    <big>
                        <h2 id="hello">Hello!</h2>
                    </big>


                    <p style="word-spacing: 1px">Please, leave your email and a phone number, to book a photosession</p>


                    <form id="form1">

                        <!--Input commands -->
                        <br>

                        <label>Email</label>
                        <input id="email" type="email" placeholder="email" required size="28"> <br> <br>

                        <label>Phone Number</label>
                        <input id="phone" type="tel" placeholder="phone number"> <br> <br>

                        <small><label style="font-weight: bolder; "><a id="linkToRules" href="">I agree with rules and terms</a></label></small>
                        <input id="checkboxAgree" type="checkbox" required> <br> <br>

                        <input id="submit" type="submit" value="Book photosession"> <br> <br>

                    </form>

                </div>
            </main>
            <hr id="beforeFooter">
            <footer> <small><small>since 2022 we were providing best quality photos to people</small></small></footer>

        </big>
    </big>

    <p>Our story began in January of 2022, when we decided to try photography.........</p>

    <p>Mathey - one of our main photographers and the ex-founder of <big><b>"PhotoLi"</b></big> was just a regular person who wanted to bring some colorful pictures to the world. His possesion has become even more powerful since that time and he is ready to create, take photos and share 'em with you.</p>

    <img id="matheyPhoto" styles="float:left" src="man_smokes.jpg" alt="Mathey" title="Mathey">
    <div>
        <p id="matheyInfo">"When I was young I always wanted to try photography, but there was no chance to do it.<br> But when I met my team, everything had changed.<br> We love working together, we love working with our clients" — <big style="text-decoration: underline;">Mathey Woodman</big></p>
    </div>

    <div>
        <p id="ashleyInfo">"To make our clients feel comfortable and comfident in the success of our photo session,<br> we use only new and modern cameras and other devices.<br> That's playing a big role" - <big style="text-decoration: underline;"> Ashley Blackwood </big> </p>
    </div>

    <img id="ashleyPhoto" src="Ashley.jpg" alt="Ashley" title="Ashley">

    <footer id="footer2">
        <div id="servicesFooter">Our services</div>
    </footer>
    <div>
        <p id="title_party"><b>Party photosessions</b></p>

        <img src="halloween%20party.jpg" id="halloween_partyIcon">
    </div>

    <p style="position: absolute; margin-left:710px; margin-top:-450px;">

        <b>Wedding photosessions</b>

    </p>

    <img src="wedding.jpg" id="wedding_icon">

    <p style=" margin-left:1230px; margin-top:-450px;"><b>Personal photosession</b></p>

    <img src="portret%20photo.jpg" id="portrait_photo">

</body>

CSS код

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

/* first page info */

header {
    text-align: center;
    height: 60px;
    line-height: 60px;
    background-color: black;
    color: aliceblue;
    margin-bottom: 15px;
    border-radius: 5px;
}

footer {
    text-align: center;
    background-color: #333333;
    color: aliceblue;
    height: 60px;
    line-height: 60px;
    margin-top: 34px;
    border-radius: 5px;
}

#servicesFooter {
    margin-right: 40px;
}

body {
    background-color: #f1f1f1;
    font-family: 'Poppins', sans-serif;
}

#hello {
    margin-left: 64px;
}

#form1 {
    margin-top: -20px;
}

.mainInfo {
    background-color: #bfbfbf;
    text-align: left;
    margin-left: 600px;
    margin-right: 7px;
    margin-top: 25px;
    padding-left: 30px;
    border-radius: 20px;
    border: 1.5px solid black;


}

/* text before links */

#main2 {
    position: absolute;
    margin-left: 120px;
    font-weight: bold;
}

/* code for feedback informations */

.feedback {
    border: 3px solid #001a00;
    border-radius: 14px;
    padding: 10px;
}


/* styles for email input */

#email {
    height: 24px;
    font-size: 14pt;
    border-radius: 8px;
    cursor: pointer;
    color: #262626;
}

#email:active {
    color: #666666;
}

#email:focus {
    color: #666666;
    background-color: #f2f2f2;
    border-color: #9999ff;
    border-radius: 8px;
}

/* phone number styles */

#phone {
    height: 23px;
    font-size: 12pt;
    border-radius: 8px;
    cursor: pointer;
    color: #262626;
}

#phone:active {
    color: #666666;

}

#phone:focus {
    color: #666666;
    background-color: #f2f2f2;
    border-color: #9999ff;
    border-radius: 8px;
}


/* styles for checkboxes */

#checkboxAgree {
    cursor: pointer;
}

#checkboxView {
    cursor: pointer;
    height: 19px;
}

/* styles for buttons */

#submit {
    height: 30px;
    font-size: 14pt;
    border-radius: 5px;
    cursor: pointer;
}

#resetButton1 {
    height: 30px;
    font-size: 12pt;
    border-radius: 5px;
    cursor: pointer;
}

/* hooverinng input items */

#submit:hover {
    color: #3377ff;
}

#resetButton1:hover {
    color: #3377ff;
}

/* styles for lines (hr) */

#hr1 {
    border: 10px solid #3377ff;
    border-radius: 8px;
    margin-top: 7px;
    opacity: 0.8;

}

/* hr before footer */

#beforeFooter {
    width: 1492px;
    height: 7px;
    border-radius: 8px;
    background-color: black;
    margin-top: 26px;
}

/* styles for links */

#linkToRules {
    color: #2929a3;
    cursor: pointer;
}

#linkToRules:hover {
    color: #262626;
    text-decoration: underline;
}

#linkToStart {
    position: absolute;
    margin-top: 60px;
    margin-left: 120px;
    color: black;
}

#linkToStart:hover {
    color: black;
    font-weight: bolder;
}

#linkToServices {
    position: absolute;
    margin-top: 100px;
    margin-left: 120px;
    color: black;
}

#linkToServices:hover {
    color: black;
    font-weight: bolder;
}

/* photographers info */

#matheyInfo {
    display: block;
    margin-left: 570px;
    margin-top: -552px
}

#matheyPhoto {
    height: 540px;
    width: 460px;
    margin-top: 30px;
    margin-left: 40px;
    border-radius: 5px;
}

/* Ashley */

#ashleyInfo {
    display: block;
    margin-top: 50px;
    margin-left: 570px;

}

#ashleyPhoto {
    height: 325px;
    width: 510px;
    margin-left: 570px;
    border-radius: 5px;
}

/* services icons */

#halloween_partyIcon {
    height: 400px;
    margin-top: 60px;
    margin-left: 60px;
    border-radius: 5px;
    border: 4px solid #f1f1f1;
}

#halloween_partyIcon:hover {
    border-style: outset;
    border: 4px solid black;
    cursor: pointer;
}

#title_party {
    position: absolute;
    margin-left: 175px;
    display: block;
    
}


#title_party:hover {
    
    margin-left:175px; 
    font-weight: bolder;
    display: block;
}
    
#wedding_icon {
    height: 400px;
    margin-left: 40px;
    margin-top: 10px;
    border-radius: 5px;
    border: 4px solid #f1f1f1;
}

#wedding_icon:hover {
    border-style: outset;
    border: 4px solid black;
    cursor: pointer;
}

#portrait_photo {
    height: 400px;
    margin-left: 1180px;
    position: absolute;
    margin-top: -4px;
    border-radius: 5px;
    border: 4px solid #f1f1f1;
}

#portrait_photo:hover {
    border-style: outset;
    border: 4px solid black;
    cursor: pointer;
}