Excuse the long and maybe confusing title.
What I am trying to achieve is that when I click a link in my navbar-dropdownmenu the (new loading) page will automatically scroll smooth to the corresponding container centering it in the middle of the screen.
For now I use the scroll-behavior: smooth feature in CSS, but that always aligns the container with the top of the screen, which is really not a great experience for the user.
I tried about 20 different JS Codes from older posts with a close to similar problem so far, but nothing worked out :(
This is my Website, since the scrolling doesnt work in CodePen: https://gisbertstestsite.xyz/dist/htmls/leistungen.html
Here is the HTML:
<body>
<div class="snap-wrapper">
<div id="main1" class="snap-box box_1">
<nav class="navbar">
<ul>
<li><a href="/index.html"><i class="fas fa-home"></i> Home</a></li>
<li class="active dropdown"><a href="/dist/htmls/leistungen.html"><i
class="fas fa-cut"></i> Leistungen</a>
<div class="dropdown-class">
<ul class="dropdown-content">
<li><a href="/dist/htmls/leistungen.html#Herren">Herren</a></li>
<li><a href="/dist/htmls/leistungen.html#Damen">Damen</a></li>
<li><a href="/dist/htmls/leistungen.html#Jugend_Kinder">Jugend und Kinder</a></li>
<li><a href="/dist/htmls/leistungen.html#Farben_Strähnen">Farben und Strähnen</a></li>
<li><a href="/dist/htmls/leistungen.html#Wellen_Glätten">Wellen und Glätten</a></li>
<li><a href="/dist/htmls/leistungen.html#EPT">Extension | Perücken | Toupets</a></li>
<li><a href="/dist/htmls/leistungen.html#Kuren">Kuren</a></li>
<li><a href="/dist/htmls/leistungen.html#Brautservice">Brautservice</a></li>
<li><a href="/dist/htmls/leistungen.html#Kosmetik">Kosmetik</a></li>
</ul>
</div>
</li>
<li><a href="/dist/htmls/covid.html"><i class="fas fa-hands-wash"></i> Covid-19</a></li>
<li><a href="/dist/htmls/inspiration.html"><i class="fas fa-images"></i> Inspiration</a></li>
<li><a href="/dist/htmls/jobs.html"><i class="fas fa-user-graduate"></i> Jobs</a></li>
<li class="dropdown"><span><i class="fas fa-chevron-right"></i> Mehr</span>
<div id="more_dropdown" class="dropdown-class">
<ul class="dropdown-content">
<li><a href="/dist/htmls/mehr htmls/impressum.html"> Impressum</a></li>
<li><a href="/dist/htmls/mehr htmls/datenschutz.html"> Datenschutz</a></li>
</ul>
</div>
</li>
</ul>
</nav>
<main class="content">
<div class="preisliste">
<div class="blurwrapper katalog">
<div class="Katalogbeschreibung">
<h2>Leistungskatalog</h2><br>
<span>Hier finden Sie einen Auszug aus unserer akutellen Preisliste. Alle Preise richten
sich
nach
dem Arbeitsaufwand und können ggf. abweichen und sind eingeteilt in kurzes bis langes
Haar.</span>
</div>
</div>
<br>
<div class="blurwrapper Herren" id="Herren">
<div class="table">
<table class="fl-table">
<caption>Herren</caption>
<thead>
<tr>
<th>Leistung</th>
<th>Länge</th>
<th>Preis</th>
</tr>
</thead>
<tbody>
<tr>
<td>Waschen und Schneiden</td>
<td>Kurzes Haar</td>
<td>30€</td>
</tr>
<tr>
<td>Waschen und Schneiden</td>
<td>Mittellanges Haar</td>
<td>35€</td>
</tr>
<tr>
<td>Waschen und Schneiden</td>
<td>Langes Haar</td>
<td>40€</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<div class="blurwrapper Damen" id="Damen">
<div class="table">
<table class="fl-table">
<caption>Damen</caption>
<thead>
<tr>
<th>Leistung</th>
<th>Länge</th>
<th>Preis</th>
</tr>
</thead>
<tbody>
<tr>
<td>Waschen und Schneiden</td>
<td>Kurzes Haar</td>
<td>30€</td>
</tr>
<tr>
<td>Waschen und Schneiden</td>
<td>Mittellanges Haar</td>
<td>35€</td>
</tr>
<tr>
<td>Waschen und Schneiden</td>
<td>Langes Haar</td>
<td>40€</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<div class="blurwrapper Jugend_Kinder" id="Jugend_Kinder">
<div class="table">
<table class="fl-table">
<caption>Jugend und Kinder</caption>
<thead>
<tr>
<th>Leistung</th>
<th>Länge</th>
<th>Preis</th>
</tr>
</thead>
<tbody>
<tr>
<td>Waschen und Schneiden</td>
<td>Kurzes Haar</td>
<td>30€</td>
</tr>
<tr>
<td>Waschen und Schneiden</td>
<td>Mittellanges Haar</td>
<td>35€</td>
</tr>
<tr>
<td>Waschen und Schneiden</td>
<td>Langes Haar</td>
<td>40€</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<div class="blurwrapper Farben_Strähnen" id="Farben_Strähnen">
<div class="table">
<table class="fl-table">
<caption>Farben und Strähnen</caption>
<thead>
<tr>
<th>Leistung</th>
<th>Länge</th>
<th>Preis</th>
</tr>
</thead>
<tbody>
<tr>
<td>Waschen und Schneiden</td>
<td>Kurzes Haar</td>
<td>30€</td>
</tr>
<tr>
<td>Waschen und Schneiden</td>
<td>Mittellanges Haar</td>
<td>35€</td>
</tr>
<tr>
<td>Waschen und Schneiden</td>
<td>Langes Haar</td>
<td>40€</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<div class="blurwrapper Wellen_Glätten" id="Wellen_Glätten">
<div class="table">
<table class="fl-table">
<caption>Wellen und Glätten</caption>
<thead>
<tr>
<th>Leistung</th>
<th>Länge</th>
<th>Preis</th>
</tr>
</thead>
<tbody>
<tr>
<td>Waschen und Schneiden</td>
<td>Kurzes Haar</td>
<td>30€</td>
</tr>
<tr>
<td>Waschen und Schneiden</td>
<td>Mittellanges Haar</td>
<td>35€</td>
</tr>
<tr>
<td>Waschen und Schneiden</td>
<td>Langes Haar</td>
<td>40€</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<br>
</div>
</main>
</div>
</div>
</body>
And here the CSS:
*,
*::before,
*::after {
padding: 0;
margin: 0;
scroll-behavior: smooth;
}
html,
body {
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 10px;
padding: 0;
margin: 0;
background-color: transparent;
-webkit-font-smoothing: antialiased;
}
/* Hide scrollbar for Chrome, Safari and Opera */
html {
scrollbar-width: none;
/* For Firefox */
-ms-overflow-style: none;
/* For Internet Explorer and Edge */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased !important;
-moz-font-smoothing: antialiased !important;
text-rendering: optimizelegibility !important;
}
::-webkit-scrollbar {
width: 0px;
/* For Chrome, Safari, and Opera */
}
.snap-wrapper {
width: 100%;
height: 100vh;
overflow-y: scroll;
scroll-behavior: smooth;
}
.snap-wrapper .snap-box {
width: 100%;
min-height: 100vh;
overflow: hidden;
display: flex;
flex-wrap: wrap;
scroll-snap-align: center;
flex-direction: column;
padding-bottom: 1rem;
background-image: url(/images/chester-wade-0AlE0lFaKF8-unsplash.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
.snap-wrapper .snap-box:last-child {
margin-bottom: 0px;
}
.snap-wrapper .snap-box .navbar {
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
z-index: 999;
position: relative;
min-width: 100%;
max-width: 100%;
background-color: #ff1a4f;
justify-content: center;
align-items: center;
}
.snap-wrapper .snap-box .active {
background-color: #ff573a;
}
.snap-wrapper .snap-box .navbar ul {
list-style: none;
display: flex;
color: transparent;
position: relative;
}
.snap-wrapper .snap-box .navbar ul li {
position: relative;
font-size: 2.6rem;
line-height: 3.5rem;
letter-spacing: 0.13rem;
}
.snap-wrapper .snap-box .navbar ul li span,
.snap-wrapper .snap-box .navbar ul li a {
-webkit-touch-callout: none;
user-select: none;
padding: 2.3rem;
display: block;
position: relative;
z-index: 1;
color: #e2e2e2;
text-decoration: none;
}
.snap-wrapper .snap-box .navbar ul li:hover {
background-color: #ff8c00;
}
.snap-wrapper .snap-box .dropdown-class {
display: none;
}
.snap-wrapper .snap-box .navbar ul li:hover .dropdown-class {
width: 40rem;
display: list-item;
position: absolute;
background-color: #ff8c00;
}
.snap-wrapper .snap-box .navbar ul li:hover #more_dropdown {
width: auto;
display: list-item;
position: absolute;
background-color: #ff8c00;
}
.snap-wrapper .snap-box .navbar ul li:hover .dropdown-class ul {
display: block;
}
.snap-wrapper .snap-box .navbar ul li:hover .dropdown-class ul li {
font-size: 2.5rem;
border-bottom: 0.1rem ridge #fff;
background: transparent;
border-radius: 0;
text-align: left;
line-height: 1.5rem;
}
.snap-wrapper .snap-box .navbar ul li:hover .dropdown-class ul li:last-child {
border-bottom: none;
}
.snap-wrapper .snap-box .navbar ul li:hover .dropdown-class ul li:hover {
background-color: tomato;
}
.snap-wrapper .snap-box .content {
color: white;
height: 100%;
padding: 10rem 25rem 0 25rem;
position: relative;
display: flex;
background: inherit;
flex-direction: column;
font-size: 2rem;
font-weight: 900;
margin: 0 0 0 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.snap-wrapper .snap-box .content .preisliste {
display: flex;
flex-direction: column;
background: inherit;
}
.snap-wrapper .snap-box .content .preisliste .blurwrapper {
scroll-margin-top: 200rem;
display: flex;
position: relative;
background: inherit;
border-radius: 1rem;
overflow: hidden;
justify-content: center;
transition: transform 2.6s ease-in-out;
}
.snap-wrapper .snap-box .content .preisliste .blurwrapper::after {
content: "";
background: inherit;
position: absolute;
left: -25px;
top: -25px;
right: 0;
bottom: 0;
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.08);
filter: blur(10px);
}
.snap-wrapper .snap-box .content .preisliste .blurwrapper * {
position: relative;
z-index: 1;
}
.snap-wrapper .snap-box .content .preisliste .Katalogbeschreibung {
text-align: center;
margin: 20px 70px;
}
.snap-wrapper .snap-box .content .preisliste .Katalogbeschreibung h2 {
font-size: 4rem;
}
.snap-wrapper .snap-box .content .preisliste .table {
min-width: 60%;
padding-top: 2rem;
font-size: 2rem;
margin: 1rem 35rem 7rem;
}
.fl-table {
border-radius: 5px;
font-weight: normal;
border: none;
border-collapse: collapse;
width: 100%;
max-width: 100%;
white-space: nowrap;
background-color: rgba(211, 211, 211, 0.5);
}
.fl-table caption {
padding-bottom: 2rem;
}
.fl-table td,
.fl-table th {
text-align: center;
padding: 8px;
}
.fl-table td {
border-right: 1px solid rgba(80, 80, 80, 0.5);
}
.fl-table thead th {
color: #ffffff;
background: #4fc3a1;
}
.fl-table thead th:nth-child(odd) {
color: #ffffff;
background: #324960;
}
.fl-table tr:nth-child(even) {
background: rgba(80, 80, 80, 0.5);
}
/* Responsive */
