enlace a un elemento dentro de la página actual

Question

creé una página HTML con una serie de tablas con encabezados como este: contenido, Main_Page, Documento, gastos, etc.

Quiero crear un enlace de la parte superior de la página. Cuando hago clic en ese enlace, debe ir a la sección específica. Entonces utilizo el siguiente código para mapear el contenido. Pero no está funcionando para mí.

<a href="#Content">Content Section</a> 

Answer 1

Debe crear un delimitador para el enlace. La forma moderna de hacerlo es dar al elemento apropiado un atributo id="Content". La forma más antigua de hacer esto era usar <a name="Content"></a>.

Answer 2

dar al elemento que desea 'saltar' a una clara identificación, así:

<p id="idOfTag">Your content goes here</p> 

A continuación, en el enlace en la parte superior de la página, hacen referencia al ID de ese elemento (mente la #):

<a href="#idOfTag">Jump</a> 

ejemplo completo con múltiples enlaces:

<ul> 
 
    <li><a href="#contentParagraph">Content</a></li> 
 
    <li><a href="#mainPageParagraph">Main page</a></li> 
 
    <li><a href="#documentParagraph">Document</a></li> 
 
    <li><a href="#expensesParagraph">Expenses</a></li> 
 
</ul> 
 
<p id="contentParagraph"> 
 
    <h4>Content</h4> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p> 
 
<p id="mainPageParagraph"> 
 
    <h4>Main page</h4> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p> 
 
<p id="documentParagraph"> 
 
    <h4>Document</h4> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p> 
 
<p id="expensesParagraph"> 
 
    <h4>Expenses</h4> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p>

Answer 3

Puede usar el atributo name para su etiqueta anchor para lograr esto.

Digamos que usted tiene un div con id content

<div id="content">This is my div</div> 

A continuación asegúrese de que tiene una etiqueta anchor con name atributo mismo que el id del divcontent

<a href="#" name="content">Click to go to the top</a> 

Live Demo.

desplazarse para ver el enlace

Otro enfoque para hacer esto sería

<div id="content">My div</div> 

Entonces href de su etiqueta de anclaje debe #content

<a href="#content">Click to go to top</a> 

Live Demo.

Answer 4

miradas al igual que la pregunta ha sido respondida, pero si desea utilizar un scrolli ng efecto al hacer la transición a esos elementos aquí un pequeño snip JS. $ (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}, 2000, 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 []; 
    } 

});