Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Crear puntos de ancla con animación jquery

Buenas, en este pequeño ejemplo podemos ver como crear un punto de ancla o anchor text con una animación de desplazamiento usando un poco de jquery con la función .animate() de una manera muy fácil.

Enlace al ancla:
<!-- Este enlace baja a punto2 -->
<a href="#" class="ancla">Bajar</a>
la función animate de jquery:
<script>
	$('a.ancla').click(function(){
    $('html, body').animate({
        scrollTop: $('div.elpunto').offset().top
    }, 500);
    return false;
});
</script>
código ejemplo completo:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
	.puntos {
		height: 1000px	
	}
</style>

<!-- Este enlace baja a punto2 -->
<a href="#" class="ancla">Bajar</a>

<div class="caja">

<div class="puntos punto1">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore amet ipsum natus laudantium aliquam maiores, ipsam, doloremque obcaecati voluptates, inventore aspernatur ad, maxime quasi dolorum perspiciatis blanditiis? Magni, ab, voluptate.
</div>

<div class="puntos elpunto">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto dolore officia tenetur dolores aspernatur? Sed accusantium quas voluptatibus est quibusdam officia explicabo repudiandae, quisquam hic, dolorum, saepe vitae! Veritatis, cumque.
</div>

</div>


<script>
	$('a.ancla').click(function(){
    $('html, body').animate({
        scrollTop: $('div.elpunto').offset().top
    }, 500);
    return false;
});
</script>
demo
0
Puntos
2753
Visitas
0
Resp
Por alber hace 73 meses
Administrador
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate