Nos links de ancora que criamos (para uma certa posição na página, identificado pelo id), fica mais bonito que a página role com suavidade, scrolling, e que o ID do link nao aparece na barra de endereços.
O que temos depois de clicar no link:
https://seudominio.com.br/#NOSSOS-PLANOS
O que queremos:
https://seudominio.com.br/
Como fazemos isso?
Adicionando, caso não exista, o jquery () e chamando o java no link href (href=”javascript:void(0);” class=”scroll-link” data-target=”#LINK_DE_ANCORA_AQUI”), VEJA O EXEMPLO ABAIXO:
<!DOCTYPE html>
<html lang="pt-br">
<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">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<title>Scroll Suave e sem a hash da URL</title>
<style>
body {
height: 1500px; /* Apenas para criar uma página longa para fins de demonstração */
}
</style>
</head>
<body>
<a href="javascript:void(0);" class="scroll-link" data-target="#NOSSOS-PLANOS">Ir para nossos planos</a>
<a href="javascript:void(0);" class="scroll-link" data-target="#OUTRA-ANCORA">Ir para outra âncora</a>
<h2 id="NOSSOS-PLANOS">Nossos Planos</h2>
<!-- Conteúdo dos planos aqui -->
<h2 id="OUTRA-ANCORA">Outra Âncora</h2>
<span class=" outracor comentario"><!-- Conteúdo da outra âncora aqui --></span>
<script>
$(document).ready(function(){
<span class="comentario"> // Adiciona o efeito de rolagem suave para todos os links com a classe 'scroll-link'</span>
$(".scroll-link").on('click', function(event) {
event.preventDefault();
var target = $(this).data("target");
// Usa jQuery para animar a rolagem
$('html, body').animate({
scrollTop: $(target).offset().top
}, 800);
});
});
</script>
</body>
</html>