My anchor link is instantly going to the section I want it to go to. It doesn't scroll down even though my scroll behavior is set to smooth. I watched a lot of tutorials and none of them really helped me. Could someone help me please? Also I don't want to use JavaScript. I'm trying to make this website with only CSS and html.
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
height: 1000vh;
}
a {
text-decoration: none;
}
section {
font-size: 2rem;
background-color: #333;
padding: 40px;
color: blueviolet;
}
.container {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
header {
position: relative;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.background {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px) scale(2);
filter: brightness(70%);
}
.logo {
position: relative;
right: 20spx;
top: 10px;
}
.title {
z-index: 1;
color: rgb(255, 255, 255);
font-size: 120px;
font-family: 'Nunito';
position: relative;
top: 15%;
left: 10%;
width: 400px;
}
.subText {
z-index: 1;
color: rgb(255, 255, 255);
font-size: 25px;
font-family: 'Nunito';
position: relative;
top: 13%;
left: 10.5%;
width: 700px;
}
.learnMore {
background-color: white;
width: 200px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
position: relative;
top: 17%;
left: 10%;
color: black;
font-family: 'Nunito';
}
.learnMore:hover {
background-color: gray;
}<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<div class="container">
<header>
<img src="images/discover.jpg" alt="Not Loading" width="1470px" height="800px" class="background">
<img src="images/logo.png" alt="Not Loading" class="logo" width="400px" height="75px">
<div class="title">DISCOVER</div>
<div class="subText">Find Your Dream House From The Relaxation Of Your Couch</div>
<a href="#text">
<div class="learnMore">
<h3>Learn More</h3>
</div>
</a>
</header>
<section id="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas vero numquam rem? Delectus nostrum eveniet possimus hic expedita at magni quos corrupti. Facilis sed architecto eveniet natus iusto incidunt quis tenetur deserunt excepturi odit ipsa molestias
eaque similique, commodi numquam, quod explicabo hic nesciunt repellendus necessitatibus voluptatibus. Consectetur quam quo dicta laudantium repudiandae, id doloribus dolorem maxime ab architecto. Quis, iusto officia. Error quasi totam dolorem quo
animi pariatur voluptatum impedit, laboriosam optio eius, ut quibusdam voluptatem, aut id rem quidem quaerat deserunt esse. Facilis veniam architecto quod dolor facere corporis ratione iusto fugiat, esse, tenetur porro reiciendis quam odit quidem
non aperiam rerum officiis maxime quasi id voluptatum. Culpa, doloremque suscipit est fuga cupiditate iusto ab assumenda error quaerat in! Praesentium iste ut architecto temporibus, possimus cupiditate? Repellendus minima quibusdam accusantium. Commodi
impedit officiis sequi atque dolores maiores repudiandae labore officia. Illo ea consequatur ipsum, necessitatibus quia assumenda vel non fuga voluptatem rerum natus? Velit ipsum veritatis adipisci maiores suscipit tempora sint, nostrum dignissimos
dolores fugit in vero est aliquid nemo minus, perferendis esse enim. Molestias facere debitis quas reiciendis deserunt. Necessitatibus veritatis facilis consequuntur consequatur ipsum temporibus assumenda, nihil similique neque sunt, molestias itaque
debitis laudantium cum distinctio beatae doloribus ab impedit quas aspernatur at soluta. Accusantium saepe dolore iure eos possimus unde quia maxime fugit nobis dolorem, ipsam quidem perspiciatis odit repellendus excepturi nesciunt perferendis eveniet
magnam eaque! Distinctio, atque! Laudantium libero eum necessitatibus iste facilis, consequuntur officia error inventore quo molestias recusandae accusamus quam cupiditate quibusdam doloribus eaque aliquam animi quisquam impedit optio praesentium
voluptate, sunt ab? Maiores nam voluptas ipsa inventore iste fugiat minus hic a dignissimos facere voluptate suscipit, magnam id! Iusto magni possimus animi reiciendis, corrupti iste natus reprehenderit commodi quia eum veritatis maxime corporis ad
distinctio accusamus voluptate laudantium blanditiis. Asperiores, nobis.
</section>
</div>Don't apply the smooth scroll to the html element, apply it to the container instead:
.container{
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
height: 1000vh;
}
a {
text-decoration: none;
}
section {
font-size: 2rem;
background-color: #333;
padding: 40px;
color: blueviolet;
}
.container {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
header {
position: relative;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.background {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px) scale(2);
filter: brightness(70%);
}
.logo {
position: relative;
right: 20spx;
top: 10px;
}
.title {
z-index: 1;
color: rgb(255, 255, 255);
font-size: 120px;
font-family: 'Nunito';
position: relative;
top: 15%;
left: 10%;
width: 400px;
}
.subText {
z-index: 1;
color: rgb(255, 255, 255);
font-size: 25px;
font-family: 'Nunito';
position: relative;
top: 13%;
left: 10.5%;
width: 700px;
}
.learnMore {
background-color: white;
width: 200px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
position: relative;
top: 17%;
left: 10%;
color: black;
font-family: 'Nunito';
}
.learnMore:hover {
background-color: gray;
}<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<div class="container">
<header>
<img src="images/discover.jpg" alt="Not Loading" width="1470px" height="800px" class="background">
<img src="images/logo.png" alt="Not Loading" class="logo" width="400px" height="75px">
<div class="title">DISCOVER</div>
<div class="subText">Find Your Dream House From The Relaxation Of Your Couch</div>
<a href="#text">
<div class="learnMore">
<h3>Learn More</h3>
</div>
</a>
</header>
<section id="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas vero numquam rem? Delectus nostrum eveniet possimus hic expedita at magni quos corrupti. Facilis sed architecto eveniet natus iusto incidunt quis tenetur deserunt excepturi odit ipsa molestias
eaque similique, commodi numquam, quod explicabo hic nesciunt repellendus necessitatibus voluptatibus. Consectetur quam quo dicta laudantium repudiandae, id doloribus dolorem maxime ab architecto. Quis, iusto officia. Error quasi totam dolorem quo
animi pariatur voluptatum impedit, laboriosam optio eius, ut quibusdam voluptatem, aut id rem quidem quaerat deserunt esse. Facilis veniam architecto quod dolor facere corporis ratione iusto fugiat, esse, tenetur porro reiciendis quam odit quidem
non aperiam rerum officiis maxime quasi id voluptatum. Culpa, doloremque suscipit est fuga cupiditate iusto ab assumenda error quaerat in! Praesentium iste ut architecto temporibus, possimus cupiditate? Repellendus minima quibusdam accusantium. Commodi
impedit officiis sequi atque dolores maiores repudiandae labore officia. Illo ea consequatur ipsum, necessitatibus quia assumenda vel non fuga voluptatem rerum natus? Velit ipsum veritatis adipisci maiores suscipit tempora sint, nostrum dignissimos
dolores fugit in vero est aliquid nemo minus, perferendis esse enim. Molestias facere debitis quas reiciendis deserunt. Necessitatibus veritatis facilis consequuntur consequatur ipsum temporibus assumenda, nihil similique neque sunt, molestias itaque
debitis laudantium cum distinctio beatae doloribus ab impedit quas aspernatur at soluta. Accusantium saepe dolore iure eos possimus unde quia maxime fugit nobis dolorem, ipsam quidem perspiciatis odit repellendus excepturi nesciunt perferendis eveniet
magnam eaque! Distinctio, atque! Laudantium libero eum necessitatibus iste facilis, consequuntur officia error inventore quo molestias recusandae accusamus quam cupiditate quibusdam doloribus eaque aliquam animi quisquam impedit optio praesentium
voluptate, sunt ab? Maiores nam voluptas ipsa inventore iste fugiat minus hic a dignissimos facere voluptate suscipit, magnam id! Iusto magni possimus animi reiciendis, corrupti iste natus reprehenderit commodi quia eum veritatis maxime corporis ad
distinctio accusamus voluptate laudantium blanditiis. Asperiores, nobis.
</section>
</div>