Good day developers, how are you?
My question is the following: How can I possibly do in CSS that when I click on an element of the menu in the header of my page, it takes me to an element of the same page through the internal navigation with a scroll transition in the page.
I would really appreciate it, I hope you understood.
There are a couple of ways to do it, but the one I use is with jQuery.
<script>
$(document).ready(function(){
// El "efecto" se le agrega a todos los elementos <a>
$("a").on('click', function(event) {
// Al hacer click te llevará a lo que tenga href=""
if (this.hash !== "") {
event.preventDefault();
// El hash es el valor del link
var hash = this.hash;
// La velocidad de la animación puedes modificarla, 1000 = 1 segundo
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function(){
window.location.hash = hash;
});
} // End if
});
});
</script>
It is worth mentioning that you must import jQuery to work.