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