Problems with smooth scrolling to an anchor
Question
I am currently developing a site but I am encountering a problem.
There are several div (item). When I scroll a little bit, the page focuses directly on the whole div (with a height of 100vh). This works perfectly. On the other hand, I tried several methods (js, css, jquery) to do a smooth scroll when you click on a button that points to an anchor, but it doesn't work. After several hours of research I found that the two lines overflow: scroll; and scroll-behavior: smooth; are not compatible with each other. When I delete the first one, the automatic focus on the full height of the div no longer works but the smooth scroll of the buttons works correctly, and vice versa.
Do you know how to "merge" these two effects?
(I hope you understood my problem, if you have any questions ask me^^)
<body>
<div class="container">
<div class="item" id="accueil">
<nav>
<div class="logo" data-aos="fade-up">
<img src="elements/illustrations/head.svg" height="100px" width="100px" alt="">
</div>
<ul class="nav-links" data-aos="fade-up">
<li><a class="smoothScroll current" href="#accueil">Accueil</a></li>
<li><a class="smoothScroll" href="#covid19">Covid-19</a></li>
<li><a class="smoothScroll" href="#cyberharcelement">Cyberharcèlement</a></li>
<li><a class="smoothScroll" href="#anticovid">Anti-Covid</a></li>
<li><a class="smoothScroll" href="#galerie">Galerie Saint Germain</a></li>
</ul>
</nav>
<div class="header">
<section class="left">
<div data-aos="fade-up" class="heading">
<h1>Bonjour 👋 <br> je m'appelle <span id='jules'>Jules</span>, <br> </h1>
<div class="typewriter">
<h1>ravi de vous rencontrer</h1>
</div>
</div>
<a class="button" class="smoothScroll" data-aos="zoom-in-right" href="#covid19">Découvrir</a>
</section>
<section class="right" data-aos="fade-left">
<div class="illustration">
<img src="elements/illustrations/illustration.svg" alt="">
</div>
</section>
</div>
</div>
<div class="item" id="covid19">Covid-19</div>
<div class="item" id="cyberharcelement">Cyberharcèlement</div>
<div class="item" id="anticovid">Anti-Covid</div>
<div class="item" id="galerie">Galerie Saint Germain</div>
</div>
html {
scroll-behavior: smooth !important;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
font-family: var(--inter);
}
.container {
max-height: 100vh;
overflow: scroll;
scroll-snap-type: y mandatory;
}
.item {
color:black;
/* background: #f5f5f5; */
height: 100vh;
scroll-snap-align: start;
}
1 answers
solution1
1 ACCPTED 2021-02-10 05:43:10
Can you please check the below code? Hope it will work for you. You have to remove scroll-behavior from the HTML and give overflow and scroll-behavior to the container .
Please refer to this link: https://jsfiddle.net/yudizsolutions/wk3scpyr/2/
body { font-family: var(--inter); }.container { max-height: 100vh; overflow-y: scroll; scroll-behavior: smooth; }.item { color: black; /* background: #f5f5f5; */ height: 100vh; scroll-snap-align: start; }
<body> <div class="container"> <div class="item" id="accueil"> <nav> <div class="logo" data-aos="fade-up"> <img src="elements/illustrations/head.svg" height="100px" width="100px" alt=""> </div> <ul class="nav-links" data-aos="fade-up"> <li><a class="smoothScroll current" href="#accueil">Accueil</a></li> <li><a class="smoothScroll" href="#covid19">Covid-19</a></li> <li><a class="smoothScroll" href="#cyberharcelement">Cyberharcèlement</a></li> <li><a class="smoothScroll" href="#anticovid">Anti-Covid</a></li> <li><a class="smoothScroll" href="#galerie">Galerie Saint Germain</a></li> </ul> </nav> <div class="header"> <section class="left"> <div data-aos="fade-up" class="heading"> <h1>Bonjour 👋 <br> je m'appelle <span id='jules'>Jules</span>, <br> </h1> <div class="typewriter"> <h1>ravi de vous rencontrer</h1> </div> </div> <a class="button" class="smoothScroll" data-aos="zoom-in-right" href="#covid19">Découvrir</a> </section> <section class="right" data-aos="fade-left"> <div class="illustration"> <img src="elements/illustrations/illustration.svg" alt=""> </div> </section> </div> </div> <div class="item" id="covid19">Covid-19</div> <div class="item" id="cyberharcelement">Cyberharcèlement</div> <div class="item" id="anticovid">Anti-Covid</div> <div class="item" id="galerie">Galerie Saint Germain</div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.