2

Algún ejemplo de como crear enlace en la misma pagina con php tipo índice.

En jQuery he creado un desplazamiento animado en los enlaces con jQuery.

Pero con este ejemplo los enlaces externos no funcionan. Sí cambio este valor $('a').click(function(e){ por este $('.scroll').click(function(e){ los enlaces externos funcionan pero los enlace en la misma pagina se muestra en la urls de esta forma: example/index.php#ancla1

En cambio con este valor: $('a').click(function(e){ no pero los enlaces externos no funcionan.

como podría hacer funcionar los enlaces externos pero sin que los enlaces en las misma pagina no muestre esto en la urls example/index.php#ancla1

$(document).ready(function () {
  $('a').click(function(e){
    e.preventDefault();
    $('html, body').stop().animate({scrollTop: $($(this).attr('href')).offset().top}, 1000);
  });
});
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<nav>
 <ul>
  <li><a href="#ancla1">ancla1</a></li>
  <li><a href="#ancla2">ancla2</a></li>
  <li><a href="#ancla3">ancla3</a></li>
 </ul>
</nav>

<div id="ancla1">Vestibulum ultricies, leo non iaculis gravida, quam nunc tristique sem, in tincidunt nisl sapien vitae nisi. Aliquam ipsum mi, interdum vehicula sodales eu, vulputate vitae leo. Sed fringilla venenatis nisi, in vulputate arcu lobortis sit amet. Nulla ullamcorper, turpis nec semper rutrum, enim magna ultricies nunc, at blandit odio turpis sit amet dolor. Cras cursus quis tortor et pretium. Suspendisse potenti. Ut volutpat, purus eget hendrerit porta, dolor nulla sodales mi, ac accumsan justo sem at justo. Morbi sit amet nulla tristique dolor sollicitudin accumsan nec et eros. Nam et sodales tortor.</p>

<p>Cras auctor laoreet quam sit amet vestibulum. Aenean pharetra eleifend nisl semper dignissim. Curabitur at elementum elit. Ut eu imperdiet purus. Cras eros diam, congue et libero vel, lobortis porttitor sapien. Maecenas vitae malesuada turpis, eget viverra ipsum. Mauris nec viverra elit, ut ornare dui.</p>

<p>Curabitur lobortis convallis tincidunt. Nunc luctus magna vitae felis congue interdum. Nullam accumsan pellentesque velit vitae dictum. Duis interdum libero at turpis molestie vehicula. Nulla sit amet tortor id turpis rutrum tempor. Sed ac lectus mollis, consequat dolor dictum, semper eros. Duis pharetra, turpis sit amet imperdiet ullamcorper, lectus mi condimentum purus, sit amet mattis neque ipsum id dui. Praesent fringilla, dolor auctor tristique pretium, odio turpis luctus magna, sit amet faucibus lacus nunc vel sem.</div>

<div id="ancla3">Vestibulum ultricies, leo non iaculis gravida, quam nunc tristique sem, in tincidunt nisl sapien vitae nisi. Aliquam ipsum mi, interdum vehicula sodales eu, vulputate vitae leo. Sed fringilla venenatis nisi, in vulputate arcu lobortis sit amet. Nulla ullamcorper, turpis nec semper rutrum, enim magna ultricies nunc, at blandit odio turpis sit amet dolor. Cras cursus quis tortor et pretium. Suspendisse potenti. Ut volutpat, purus eget hendrerit porta, dolor nulla sodales mi, ac accumsan justo sem at justo. Morbi sit amet nulla tristique dolor sollicitudin accumsan nec et eros. Nam et sodales tortor.</p>

<p>Cras auctor laoreet quam sit amet vestibulum. Aenean pharetra eleifend nisl semper dignissim. Curabitur at elementum elit. Ut eu imperdiet purus. Cras eros diam, congue et libero vel, lobortis porttitor sapien. Maecenas vitae malesuada turpis, eget viverra ipsum. Mauris nec viverra elit, ut ornare dui.</p>

<p>Curabitur lobortis convallis tincidunt. Nunc luctus magna vitae felis congue interdum. Nullam accumsan pellentesque velit vitae dictum. Duis interdum libero at turpis molestie vehicula. Nulla sit amet tortor id turpis rutrum tempor. Sed ac lectus mollis, consequat dolor dictum, semper eros. Duis pharetra, turpis sit amet imperdiet ullamcorper, lectus mi condimentum purus, sit amet mattis neque ipsum id dui. Praesent fringilla, dolor auctor tristique pretium, odio turpis luctus magna, sit amet faucibus lacus nunc vel sem.</div>

<div id="ancla1">Vestibulum ultricies, leo non iaculis gravida, quam nunc tristique sem, in tincidunt nisl sapien vitae nisi. Aliquam ipsum mi, interdum vehicula sodales eu, vulputate vitae leo. Sed fringilla venenatis nisi, in vulputate arcu lobortis sit amet. Nulla ullamcorper, turpis nec semper rutrum, enim magna ultricies nunc, at blandit odio turpis sit amet dolor. Cras cursus quis tortor et pretium. Suspendisse potenti. Ut volutpat, purus eget hendrerit porta, dolor nulla sodales mi, ac accumsan justo sem at justo. Morbi sit amet nulla tristique dolor sollicitudin accumsan nec et eros. Nam et sodales tortor.</p>

<p>Cras auctor laoreet quam sit amet vestibulum. Aenean pharetra eleifend nisl semper dignissim. Curabitur at elementum elit. Ut eu imperdiet purus. Cras eros diam, congue et libero vel, lobortis porttitor sapien. Maecenas vitae malesuada turpis, eget viverra ipsum. Mauris nec viverra elit, ut ornare dui.</p>

<p>Curabitur lobortis convallis tincidunt. Nunc luctus magna vitae felis congue interdum. Nullam accumsan pellentesque velit vitae dictum. Duis interdum libero at turpis molestie vehicula. Nulla sit amet tortor id turpis rutrum tempor. Sed ac lectus mollis, consequat dolor dictum, semper eros. Duis pharetra, turpis sit amet imperdiet ullamcorper, lectus mi condimentum purus, sit amet mattis neque ipsum id dui. Praesent fringilla, dolor auctor tristique pretium, odio turpis luctus magna, sit amet faucibus lacus nunc vel sem.</div>

En php como se crearía los enlaces en la misma pagina algo similar a lo de jQuery.

1 respuesta 1

2

Varias cosas:

  1. Para que no te dañe los enlaces externos debes diferenciar los internos de loos externos....

Por ejemplo usar un selector mas especifico

En vez de esto $('a').click(function(e){ usar $('nav li > a').click(function(e){ Este solo toma los a dentro de los li en el nav....

<nav>
 <ul>
  <li><a href="#ancla1">ancla1</a></li>
  <li><a href="#ancla2">ancla2</a></li>
  <li><a href="#ancla3">ancla3</a></li>
 </ul>
</nav>

$(document).ready(function () {
  $('a').click(function(e){ // <-- cambiar esto
    e.preventDefault();
    $('html, body').stop().animate({scrollTop: $($(this).attr('href')).offset().top}, 1000);
  });
});

Otra forma es ponerle una clase a los internos

<nav>
 <ul>
  <li><a class="interno" href="#ancla1">ancla1</a></li>
  <li><a class="interno"  href="#ancla2">ancla2</a></li>
  <li><a class="interno"  href="#ancla3">ancla3</a></li>
 </ul>
</nav>

Entonces tu código quedaría

$(document).ready(function () {
  $('a.interno').click(function(e){ // <-- mira el cambio
    e.preventDefault();
    $('html, body').stop().animate({scrollTop: $($(this).attr('href')).offset().top}, 1000);
  });
});
  1. No entiendo lo porque no quieres monstrar el #anchor en la URL?

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.