Skip to content

Instantly share code, notes, and snippets.

@ocariocawebdesign
Last active September 18, 2022 21:49
Show Gist options
  • Save ocariocawebdesign/214987a1df44bc9d0619c48c61aaec68 to your computer and use it in GitHub Desktop.
Save ocariocawebdesign/214987a1df44bc9d0619c48c61aaec68 to your computer and use it in GitHub Desktop.
scrool-suave
function scrollSmooth() {
// href^=''#' a que termive com #
const linksInternos = document.querySelectorAll('.nav-main a[href^="#"');
console.log(linksInternos);
function scrollToSecion(event) {
event.preventDefault();
const href = event.currentTarget.getAttribute("href");
const section = document.querySelector(href);
section.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
linksInternos.forEach((link) => {
link.addEventListener("click", scrollToSecion);
});
}
scrollSmooth();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav class="nav-main">
<a href="#home">Home</a>
<a href="#servicos">Serviços</a>
<a href="#setores">Setores</a>
<a href="#contato">Contato</a>
</nav>
<div class="container">
<div class="" id="home">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur ipsum in inventore sapiente ea
laboriosam molestiae repellendus? Necessitatibus autem explicabo non repellendus quis. Maiores odio
necessitatibus porro natus eos placeat?</p>
</div>
<div class="" id="servicos" style="margin-top:80%">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur ipsum in inventore sapiente ea
laboriosam molestiae repellendus? Necessitatibus autem explicabo non repellendus quis. Maiores odio
necessitatibus porro natus eos placeat?</p>
</div>
<div class=" " id="setores" style="margin-top:80%">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur ipsum in inventore sapiente ea
laboriosam molestiae repellendus? Necessitatibus autem explicabo non repellendus quis. Maiores odio
necessitatibus porro natus eos placeat?</p>
</div>
<div class="" id="contato" style="margin-top:80%">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur ipsum in inventore sapiente ea
laboriosam molestiae repellendus? Necessitatibus autem explicabo non repellendus quis. Maiores odio
necessitatibus porro natus eos placeat?</p>
</div>
</div>
<script src="/index.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment