Link "volver arriba" dinámico

Este es, básicamente, un link que aparece con un agradable fade cuando haces scroll abajo en una web y que desaparece cuando estás arriba. Es una forma de evitar tener el botón de subir cuando estás arriba.

    jQuery(document).ready(function(){

      // hide #back-top first
      jQuery("#back-top").hide();
      
      // fade in #back-top
      jQuery(function () {
        jQuery(window).scroll(function () {
          if (jQuery(this).scrollTop() > 100) {
            jQuery('#back-top').fadeIn();
          } else {
            jQuery('#back-top').fadeOut();
          }
        });

        // scroll body to 0px on click
        jQuery('#back-top a').click(function () {
          jQuery('body,html').animate({
            scrollTop: 0
          }, 800);
          return false;
        });
      });

    });
    <div class="visible-xs">
      <a href="#navbar" class="pull-left" id="back-top">
         <i class="fa fa-arrow-up"></i>
         <?php print t('Go to top'); ?>
      </a>
    </div>

Este ejemplo esta hecho para una web Drupal con Bootstrap, Jquery y Fontawesome. ;-)


Autor del artículo Miguel Angel del Toro Medina

Y, ya sabéis, para cualquier consulta, podéis contactar conmigo a través del email info@madeltoro.es