<a href="#" class="scroll-to-top"><span class="glyphicon glyphicon-arrow-up"></span><span class="sr-only">Ir arriba</span></a>
<div class="container">
  <h1>Ejemplo scroll to top animado</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur non arcu in iaculis. Donec sem lacus, laoreet nec imperdiet placerat, facilisis nec lectus. Fusce tincidunt vitae nisi tempor aliquam. Sed vel ex at mi ullamcorper placerat porttitor et justo. Praesent varius porttitor leo sed finibus. Integer metus elit, congue at dui in, feugiat volutpat neque. Phasellus lobortis felis ut luctus semper. Morbi vel nunc vulputate, posuere eros vitae, blandit nulla. Duis ut ullamcorper sapien. Aenean laoreet urna ante, eget scelerisque sem condimentum vel. Fusce at leo in odio sollicitudin ullamcorper. Quisque aliquam diam vel augue sagittis efficitur at sed neque.</p>

<p>Duis vel metus imperdiet, commodo est id, varius urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras sed volutpat mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse convallis augue massa, sed finibus eros pharetra nec. Sed iaculis ac leo vitae aliquam. Integer at interdum magna, at dictum quam. Duis viverra erat id enim maximus mattis. Morbi sit amet ultricies est. Integer dui quam, pretium a lacus eu, varius tristique urna. Proin fermentum sagittis sapien nec condimentum. Sed sed nibh vel magna laoreet consequat eu ut elit. Praesent a varius nibh, in vestibulum lacus. Phasellus auctor diam ac leo facilisis ornare. Pellentesque sed iaculis turpis. Vivamus tristique a ex ut venenatis.</p>

<p>Duis vel sem imperdiet, varius elit nec, commodo ligula. Maecenas sit amet tincidunt neque, sed venenatis nulla. Nunc ac massa in nulla tincidunt ultrices sit amet at risus. In sed ipsum mauris. Nunc id facilisis lorem. Aliquam mollis metus ut vulputate pretium. Curabitur imperdiet nunc odio. Mauris et enim a quam maximus eleifend vitae sed nisl. Maecenas porta justo quis nulla scelerisque, a suscipit magna accumsan. In ut metus eget neque suscipit vulputate. Quisque eu leo iaculis est iaculis volutpat. Pellentesque fermentum placerat viverra. Nunc nisi felis, commodo at nunc ac, gravida molestie nunc. Suspendisse ex ex, mollis a nunc sed, vulputate porta nisl. Pellentesque ipsum magna, maximus sit amet mattis in, porttitor vel ex. Vestibulum sit amet ultricies lacus, et euismod mi.</p>

<p>Ut elementum est vel leo porttitor, at aliquet quam sodales. Aenean ut dictum lectus, sit amet sodales tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque rutrum, mauris et ornare dignissim, ex enim gravida metus, non eleifend lectus dui vitae lorem. Suspendisse vel sem in risus malesuada fringilla. Quisque scelerisque, quam convallis luctus commodo, purus sem sodales arcu, blandit dapibus nisi turpis in sapien. In porta urna felis, eu sagittis elit rutrum ac. Donec quis enim ut lacus tempus pretium eu nec enim. Nunc iaculis magna quis neque finibus posuere. Phasellus sed felis quam.</p>

<p>Cras accumsan congue suscipit. Cras tincidunt nec turpis id euismod. Pellentesque sollicitudin, urna in pulvinar rutrum, eros risus varius lacus, quis sagittis ipsum massa et odio. Nulla in mauris iaculis, iaculis libero et, tempus mauris. Duis maximus augue quis massa vehicula gravida. Quisque lobortis sodales vestibulum. Vestibulum hendrerit, augue sit amet tempus pulvinar, ex orci faucibus lorem, a interdum dolor nisl sit amet magna. Nulla sagittis vehicula neque sed gravida.</p>

<p>Vivamus sem nunc, congue non pretium ut, commodo in felis. Fusce a sollicitudin ante, tincidunt condimentum nisl. Praesent sed sagittis nibh. Quisque imperdiet et purus nec finibus. Nunc vel aliquam risus. Nullam hendrerit tortor viverra est hendrerit pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam id urna id lorem faucibus aliquet. Praesent condimentum nibh urna, non euismod massa egestas nec. Vivamus neque urna, convallis placerat ipsum in, pharetra viverra diam. Phasellus tincidunt lorem sed eros egestas, eget scelerisque turpis laoreet. Nam nec dignissim lacus. Fusce lorem nulla, auctor eget dui pretium, rhoncus auctor nisl.</p>

<p>ellentesque vitae felis odio. Suspendisse potenti. Maecenas a nisl mi. Suspendisse porttitor, justo scelerisque interdum mollis, ante nisi pulvinar dui, sed pulvinar enim augue ac mi. Quisque dolor risus, facilisis non quam ac, bibendum dapibus ipsum. Pellentesque egestas eros eu sapien rutrum, nec condimentum arcu laoreet. Praesent quam nulla, facilisis a leo vitae, malesuada fermentum lectus. Cras eget orci sed ipsum tincidunt tempor. Phasellus congue sem et odio ultrices bibendum sed non magna. Duis tortor velit, ornare scelerisque nulla quis, egestas gravida diam. Proin hendrerit tempus massa, nec bibendum ante fermentum et. Ut massa dui, varius nec turpis a, luctus efficitur erat.</p>

<p>Donec id auctor purus, sit amet bibendum nisi. Nam sapien orci, aliquet ut porta et, viverra a mi. Nulla at libero pellentesque, lacinia ligula nec, viverra leo. Vivamus dolor tellus, rutrum vitae luctus a, convallis quis risus. Sed a lectus in enim pretium commodo. Sed ullamcorper congue dui, eu sollicitudin ipsum suscipit eu. Vestibulum porta mi enim, sed laoreet dui sodales vel. Maecenas pharetra hendrerit dolor. Morbi nec leo in mi porta accumsan sed quis sapien. Curabitur egestas mattis urna at tempus. Ut et placerat libero. Nam nunc ante, ullamcorper ac bibendum at, tristique malesuada sem. Mauris vestibulum fermentum mollis. Phasellus odio sapien, mollis in justo in, convallis lacinia urna. Etiam rutrum auctor augue nec vehicula.</p>

<p>Sed malesuada quam eget diam eleifend, quis auctor ante efficitur. Phasellus mattis accumsan convallis. In tristique eu enim id vestibulum. Suspendisse in nibh eu ante auctor vestibulum in in orci. Vivamus sagittis dignissim nisi eget aliquet. Aenean sed lectus tempus, varius neque id, varius libero. Fusce pretium nibh eu ligula tempor, et consectetur sem aliquet. Aenean vehicula eu ligula ut fringilla. Fusce tincidunt vehicula tristique. In tempor fringilla condimentum. Aenean viverra nisl a ornare lacinia. Nulla facilisi. Praesent dapibus vestibulum libero, a placerat tortor auctor non. In nec tincidunt purus, vitae posuere ligula.</p>

<p>Phasellus rhoncus ante vel mattis eleifend. In massa urna, rhoncus vel augue a, sodales condimentum lacus. Nunc vel suscipit leo, et blandit massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum facilisis sem quis semper fermentum. Quisque porta pellentesque nibh, a cursus ex gravida id. Nullam sit amet nunc commodo, fringilla metus vitae, posuere arcu. Duis a consequat dolor. Phasellus ac risus ultrices, mollis dolor sed, accumsan est. Suspendisse venenatis, mauris et rutrum mattis, ante nisi fermentum lectus, vitae tristique urna dui vel odio.</p>
</div>
body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: #eee;
}

.container {
  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;
}
/*texto para lectores de pantalla*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.scroll-to-top{
  text-decoration: none;
  position: fixed; 
  top: 20px;
  right: 20px;
  display: none;
  font-size: 36px;
  color: #555;
}

.scroll-to-top:hover{
  text-decoration:none;
  color: #000;
}
(function($){

$(document).ready(

  function(){

    // Comprobar si estamos, al menos, 100 px por debajo de la posición top
    // para mostrar o esconder el botón
    $(window).scroll(function(){

      if ( $(this).scrollTop() > 100 ) {

        $('.scroll-to-top').fadeIn();

      } else {

        $('.scroll-to-top').fadeOut();

      }

    });

    // al hacer click, animar el scroll hacia arriba
    $('.scroll-to-top').click( function( e ) {

      e.preventDefault();
      $('html, body').animate( {scrollTop : 0}, 800 );

    });

  });

})(jQuery);

External CSS

  1. //maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css

External JavaScript

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