scroll-behavior: smooth jumps instead of scrolling smoothly

I’m building a website that contains various content, and at the top I want to have an arrow button that, when clicked, scrolls down to a specific section of the page.

However, when I click the arrow, it doesn’t scroll smoothly — instead, it instantly jumps to the target section.

I’m building this with Angular, but so far I’ve only modified the HTML and CSS.

Here’s the relevant HTML:

<a href="#como-nos-conhecemos-link">
<img src="../assets/imagens/arrow_downward_24dp_CF3869_FILL0_wght400_GRAD0_opsz24.png"
alt="Ver mais"
class="seta-baixo">
</a>

<section class="como-nos-conhecemos" id="como-nos-conhecemos-link">
<img src="assets/imagens/11.png"
alt="Flor decorativa"
class="flor-decorativa"
style="transform: rotate(285deg) scaleX(-1) scaleY(-1);">
...
</section>


And here’s the CSS:

html {
scroll-behavior: smooth !important;
}

.seta-baixo {
display: block;
margin: 2rem auto 1rem auto;
width: 32px;
height: 32px;
cursor: pointer;
animation: pulsar 1.5s infinite;
transition: transform 0.3s ease;
}

@keyframes pulsar {
0% {
transform: translateY(0);
opacity: 0.8;
}
50% {
transform: translateY(8px);
opacity: 1;
}
100% {
transform: translateY(0);
opacity: 0.8;
}
}


What I expected: Clicking the arrow should scroll smoothly to the section.

What happens: The page instantly jumps to the section without any smooth transition.

Continue reading...