Scroll in HTML doesn't work

baummatz · March 16, 2020, 9:00pm

Hey, i want to link my li elements to divs with IDs but it doesn’t work. it works on #Kontakt, #Anfang, #Ende but it doesn’t work on the other divs like #Infos and co. please help its important.

My html code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>PBBL - Österreichische Paintball-Bundesliga</title>

    <link href="pbbl.css" rel="stylesheet" type="text/css"/>

</head>

<body>

    <div class="top-bar">

        <div class="logo"><img id="header-img" src="pbblimg/logo.png" width="75" length="75"></div>

        <div class="menu">

            <ul>

                <li id="home"><a href="#Anfang" class="nav-link">Home</a></li>

                <li id="Infos"><a href="#Infos" class="nav-link">Infos</a></li>

                <li id="Termine"><a href="#Termine" class="nav-link">Termine</a></li>

                <li id="Teammanager"><a href="https://teammanager.paintballbundesliga.at/login" class="nav-link">Teammanager</a></li>

                <li id="Tabellen"><a href="#Tabellen" class="nav-link">Tabellen</a></li>

                <li id="Live-Scores"><a href="#Live-Scores" class="nav-link">Live-Scores</a></li>

                <li id="Sponsoren"><a href="#Sponsoren" class="nav-link">Sponsoren</a></li>

                <li id="Teams"><a href="#Teams" class="nav-link">Teams</a></li>

                <li id="kontakt"><a href="#Ende" class="nav-link">Kontakt</a></li>

            </ul>

        </div>

    </div>

            <div class="banner" id="Anfang">

                <div class="banner-text">

                    <div class="banner-text-items">

                        <h2><img src="pbblimg/logo.png" alt=""></h2>

                    </div>

                </div>

            </div>

            

       <div  class="main-content" > 

        <div  id="Infos" class="main1">

                <img src="pbblimg/1.png" width="350" length="350"/>

            </div>

            <div class="main1">

                <img src="pbblimg/2.png" width="350" length="350"/>

            </div>

                

                <div class="main1">

                    <img src="pbblimg/3.png" width="350" length="350"/>

                </div>

           

                <div class="main1">

                    <img src="pbblimg/4.png" width="350" length="350"/>

                </div>

                <div class="main1">

                    <img src="pbblimg/5.png" width="350" length="350"/>

                </div>

                <div class="main1">

                    <img src="pbblimg/6.png" width="350" length="350"/>

                </div>

                    </div>

                </div>

                <hr>

            </hr>

                <div id="Sponsoren" class="main-content">

                    <div>

                        <h1 align="center">PBBL Partner</h1>

                        <img width="200" length="350" src="pbblimg/sp1.jpg" alt="">

                        <img width="200" length="350" src="pbblimg/sp2.jpg" alt="">

                    </div>

                </div>

                <hr>

            </hr>

                <div class="main-content" >

                    <div>

                        <h1 align="center">Gold Sponsoren</h1>

                        <img width="200" length="200" src="pbblimg/g1.jpg" alt="">

                        <img width="200" length="200" src="pbblimg/g2.jpg" alt="">

                        <img width="200" length="200" src="pbblimg/g3.jpg" alt="">

                        <img width="200" length="200" src="pbblimg/g4.jpg" alt="">

                        <img width="200" length="200" src="pbblimg/g5.png" alt="">

                    </div>

                </div>

                <hr>

            </hr>

            <div class="main-content" >

                <div>

                    <h1 align="center">Silber Sponsoren</h1>

                    <img width="200" length="200" src="pbblimg/s1.jpg" alt="">

                </div>

            </div>

            <hr>

        </hr>

        <div id="Termine" class="main-content" text-align="center">

            <div>

                <h1 align="center">Termine</h1>

                <img src="pbblimg/t1.jpg" alt="">

            </div>

        </div>

        <hr>

    </hr>

        <div id="Live-Scores" class="main-content">

            <div>

                <h1 align="center">Live-Scores</h1>

                <a href="scoreboard.xball-series.com">3M Newcomer</a>

                <a href="scoreboard.xball-series.com">3M</a>

                <a href="scoreboard.xball-series.com">5M</a>

            </div>

        </div>

        

        <form id="form" action="">

                <div id="Ende" class="contact">

                        <div class="contact-text">

                            <div class="contact-items">

                                <h2>Fragen? Schreibe uns</h2>

                                <input type="text"placeholder="Dein Name...">

                                <input type="text"placeholder="E-Mail Adresse eingeben">

                                 <textarea cols="20" rows="20" placeholder="Deine Nachricht an PBBL"></textarea>

                                 <a href="http://mywebseite/process.js">Submit</a>

                             </div>

                        </div>

                    </div>

        </form>

</body>

<footer>

</footer>

</html>

my css:

html {

    scroll-behavior: smooth;

    font-family: Arial;

}

div{

    margin-left: auto;

    margin-right: auto;

}

.top-bar { position: sticky;  top: 0; }

*{margin: 0;padding: 0;}

.banner{background: url("pbblimg/p1.jpg");

width: 100%;

background-attachment: fixed;

background-size: auto;

}

h2{

    font-family: Arial, Helvetica, sans-serif;

    font-weight: 100;

}

p{

    font-family: Arial, Helvetica, sans-serif;

    font-weight: 100;

}

.top-bar{

    background-color: #000;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    width: 100%;

    height: 75px;

    position: fixed;

}

.logo{

    color: #fff;

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;

    padding: 18px;

}

.menu{

    -webkit-box-flex: 3;

    -webkit-flex: 3;

    -ms-flex: 3;

    flex: 3;

}

.menu ul{

   display: -webkit-box;

   display: -webkit-flex;

   display: -ms-flexbox;

   display: flex;

   list-style:none;

   margin-top: 30px;

   -webkit-box-orient: horizontal;

   -webkit-box-direction: normal;

   -webkit-flex-flow: row wrap;

   -ms-flex-flow: row wrap;

   flex-flow: row wrap;

}

.menu ul li{

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;

    text-align: center;

}

.menu ul li a{

    color: #CCD6FF;

    font-size: 20px;

    text-decoration: none;

}

.banner-text{

    display:flex;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    padding: 15% 0;

}

.banner-text-items{

    color:#fff;

    margin: auto;

    text-align: center;

    width: 50px;

}

.banner-text-items h2{

    font-size: 3em;

    font-family: CloisterBlack;

    margin-bottom: 20px;

    text-transform: uppercase;

    text-align: center;

    justify-content: center;

    display: flex;

    transition: transform.2s;

}

.banner-text-items h2:hover{

    transform: scale(1.2)

}

.banner-text-items h2:hover{

    transform: scale(1.);

}

.banner-text-items p{

    font-size: 18px;

}

.main-content{

    display:flex;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

    -webkit-flex-flow: row wrap;

    -ms-flex-flow: row wrap;

    flex-flow: row wrap;

    padding: 5% 0;

}

.main1{

    display: flex;

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;

    padding: 3%;

    text-align: center;

    width: 100%;

}

.contact-items{

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-orient: vertical;

   -webkit-box-direction: normal;

   -webkit-flex-direction: column;

   -ms-flex-direction: column;

    flex-direction: column;

}

.contact{

    background: url(loonieff/back.png);

    padding: 80px 0;

    position: relative;

    z-index: 1;

    background-attachment: fixed;

    background-size: cover;

    background-position: center center;

}

.contact:before{

    position: absolute;

    content: '';

    height: 100%;

    width: 100%;

    top: 0;

    left: 0;

    background: rgba(0,0,0,0.5);

    z-index: -1;

}

.contact-items h2{

    color: rgb(224, 229, 238);

    font-size: 40px;

    margin-bottom: 18px;

}

.contact-items input[type="text"]{

    border-radius: 10px;

    margin-bottom: 15px;

    padding: 15px;

    width: 50%;

}

.contact-items textarea{

    border-radius: 10px;

    height: 150px;

    padding: 15px;

    width: 50%;

}

.contact-items a{

    background: #9caaa8;

    color: #CCD6FF;

    display: block;

    font-size: 20px;

    margin-top: 25px;

    padding: 15px 80px;

    text-decoration: none;

    text-transform: uppercase;

    transition: transform .3s;

}

.contact-items a:hover{

    transform: scale(1.1);

}

@media all and (max-width:500px) {

    .top-bar{

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        -webkit-flex-direction: column;

        -ms-flex-direction: column;

        flex-direction: column;

        text-align: center;

    }

    .logo {

        padding: 18px 0 0;

    }

    .menu ul{

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        -webkit-flex-direction: column;

        -ms-flex-direction: column;

        flex-direction: column;

        margin-top: 0;

    }

    .menu ul li{

        padding: 5px;

    }

    .banner-text-items{

        width: 100%;

    }

    .banner-text-items h2{

        font-size: 1.5em;

    }

    .main-content{

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        -webkit-flex-direction: column;

        -ms-flex-direction: column;

        flex-direction: column;

    }

}

@media all and (max-width:800px) {

    .top-bar{

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        -webkit-flex-direction: column;

        -ms-flex-direction: column;

        flex-direction: column;

        text-align: center;

    }

    .logo {

        padding: 18px 0 0;

    }

    .menu ul{

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        -webkit-flex-direction: column;

        -ms-flex-direction: column;

        flex-direction: column;

        margin-top: 0;

    }

    .menu ul li{

        padding: 5px;

    }

    .banner-text-items{

        width: 100%;

    }

    .banner-text-items h2{

        font-size: 1.5em;

    }

    .main-content{

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        -webkit-flex-direction: column;

        -ms-flex-direction: column;

        flex-direction: column;

    }

}

Sky020 · March 16, 2020, 10:09pm

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

Also, it is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful. Blurting out your code makes it difficult to follow and work with.

Sky020 · March 16, 2020, 10:14pm

To answer your question:

This line instructs the a element to link to its parent li element:

<li id="Infos"><a href="#Infos" class="nav-link">Infos</a></li>

Important: The id attribute must be unique to any HTML page. That is, there may only be one element on a given page with the same id.

Hope this helps