<div class="wrap">
<p><a href="#" class="click-me">Click para llevarme al textarea y enfocarla</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus, arcu dictum elementum pulvinar, ipsum mi malesuada eros, ut venenatis nulla augue eget enim. Morbi nisi erat, congue sed laoreet nec, imperdiet et nisl. Vestibulum hendrerit tristique sagittis. Aenean porta mauris et purus viverra cursus. Aliquam blandit, sem et ultrices ullamcorper, leo arcu ornare mi, in tempus mauris erat sit amet velit. Quisque ultrices nisi vitae pellentesque bibendum. Ut pellentesque cursus libero, nec finibus justo consequat a.</p>

<p>Nunc feugiat, metus sed venenatis maximus, tortor nibh tempor magna, et imperdiet est enim eu velit. Mauris ac fringilla dui. Nullam pellentesque est viverra, viverra magna id, dignissim sapien. Donec ullamcorper aliquet tincidunt. Integer at laoreet urna. Curabitur suscipit eu ligula vel pulvinar. Nulla fringilla urna non pulvinar placerat. Aenean non lectus vitae libero egestas sollicitudin id ut urna. Nunc eu magna lobortis, vehicula ipsum ut, lobortis urna. Aliquam erat volutpat.</p>
<textarea id="mi-textarea"></textarea>

<p>Nunc nulla purus, pulvinar ac leo et, bibendum rhoncus nulla. Sed non diam lectus. Maecenas vel sodales erat. Morbi imperdiet urna tempor leo accumsan semper. Quisque eu laoreet enim, luctus tincidunt mauris. Curabitur sed est gravida, dapibus sapien in, tincidunt mauris. Nulla aliquam ligula nec ullamcorper lacinia. Etiam a viverra risus, in egestas arcu. Sed vitae lectus vitae mauris dignissim scelerisque in sit amet neque. Duis maximus faucibus diam id euismod. Ut mattis libero sit amet nisi porttitor, et aliquam tellus placerat. Quisque feugiat, lacus a consectetur semper, nibh lorem imperdiet tortor, ac luctus nisi libero sit amet quam. Phasellus tincidunt nisi ornare nisl feugiat, quis commodo risus ullamcorper.</p>

<p>Ut in congue ante, eget mattis orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tristique malesuada turpis at tempus. Aenean ante magna, pellentesque sit amet leo ut, suscipit iaculis ex. In imperdiet orci vitae iaculis bibendum. Morbi auctor in ipsum nec facilisis. Morbi placerat pellentesque quam, vitae consequat mi pulvinar viverra. In bibendum est vitae metus imperdiet, eget pretium purus tempus. Aenean tristique nisl in enim porttitor, sed consequat quam iaculis. Etiam at nulla faucibus, dictum ligula vel, rutrum urna. Donec gravida commodo ipsum. Cras egestas ex sit amet odio aliquet condimentum.</p>
</div>
body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: #eee;
}

.wrap {
  width: 80%;
  margin: 1em auto;
  padding: 1em 5%;
  background: #fff;
}
h1, h2 {
  margin-bottom: .5em;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.6em;
}

p {
  margin-bottom: 1em;
}
textarea {
  width: 100%;
  height: 50px;
  border: 2px solid #000;
}
textarea:focus {
  border-color: blue;
}
jQuery(document).ready(function() {
    jQuery('.click-me').click(function(e) {
        e.preventDefault();

        var target = jQuery("#mi-textarea");
        if (target.length) {
            jQuery('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000, function(){ // function to focus here
                   jQuery("#mi-textarea").focus();
             });
             return false;
         }
     });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js