Reduzca la velocidad de un enlace de anclaje html

Question

He visto esta característica muy buena en otros sitios web, pero parece que no puedo encontrarlo yo mismo.

Quiero hacer un enlace a una parte diferente de la página a través de un desplazamiento de etiqueta de anclaje y no solo saltar a la identificación deseada. Supongo que un archivo de JavaScript podría ayudar o tal vez una transición CSS, pero no sé que ese elemento de transición sería.

<a href="#bottom">scroll to bottom</a> 

<p id="bottom">bottom</p> 

Gracias :)

Answer 1

Dado que nadie realmente respondieron a esta pregunta antes voy a responder con mi descubrimiento para las personas que lo necesitan.

Todo lo que tiene que hacer es enlaces de anclaje normales como este

<a href="#bottom">scroll to bottom</a> 

<p id="bottom">bottom</p> 

continuación, añadir este código Javascript y si es necesario cambiar nada, mira a los comentarios de JavaScript

<script> 
    $(function() { 

     function filterPath(string) { 
      return string 
      .replace(/^\//,'') 
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
      .replace(/\/$/,''); 
     } 

     var locationPath = filterPath(location.pathname); 
     var scrollElem = scrollableElement('html', 'body'); 

     // Any links with hash tags in them (can't do ^= because of fully qualified URL potential) 
     $('a[href*=#]').each(function() { 

      // Ensure it's a same-page link 
      var thisPath = filterPath(this.pathname) || locationPath; 
      if ( locationPath == thisPath 
       && (location.hostname == this.hostname || !this.hostname) 
       && this.hash.replace(/#/,'')) { 

        // Ensure target exists 
        var $target = $(this.hash), target = this.hash; 
        if (target) { 

         // Find location of target 
         var targetOffset = $target.offset().top; 
         $(this).click(function(event) { 

          // Prevent jump-down 
          event.preventDefault(); 

          // Animate to target 
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { 

           // Set hash in URL after animation successful 
           location.hash = target; 

          }); 
         }); 
        } 
      } 

     }); 

     // Use the first element that is "scrollable" (cross-browser fix?) 
     function scrollableElement(els) { 
      for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
       var el = arguments[i], 
       $scrollElement = $(el); 
       if ($scrollElement.scrollTop()> 0) { 
        return el; 
       } else { 
        $scrollElement.scrollTop(1); 
        var isScrollable = $scrollElement.scrollTop()> 0; 
        $scrollElement.scrollTop(0); 
        if (isScrollable) { 
         return el; 
        } 
       } 
      } 
      return []; 
     } 

    }); 
    </script>