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:
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
Puntos
2753
Visitas
Visitas
0
Resp
Resp
Por alber hace 73 meses
Administrador