-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsmooth-scroll-com-javascript
50 lines (44 loc) · 1.17 KB
/
smooth-scroll-com-javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<head>
<style>
#sobre{
background-color: red;
min-height: 1000px;
}
#servicos{
background-color: blue;
min-height: 1000px;
}
#contato{
background-color: yellow;
min-height: 1000px;
}
</style>
</head>
<nav>
<ul>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#servicos">Serviços</a></li>
<li><a href="#contato">Contato</a></li>
<li><a target="_blank" rel="noopener noreferrer" href="https://www.mundodaprogramacao.com.br/blog/">Blog</a></li>
</ul>
</nav>
<section id="sobre">
<h2>Sobre</h2>
</section>
<section id="servicos">
<h2>Serviços</h2>
</section>
<section id="contato">
<h2>Contato</h2>
</section>
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth', //(Opcional) Utilize: "auto" ou "smooth".
block: 'start'
});
});
});
</script>