Home / Questions / 24962
Accepted
May
Asked: 2020-09-25 20:05:59 +0800 CST 2020-09-25 20:05:59 +0800 CST

How to create link on the same page with php/jquery?

  • 772

Some example of how to create a link on the same page with php index type.

In jQuery I have created an animated scroll on the links with jQuery.

But with this example the external links don't work. Yes, I change this value $('a').click(function(e){for this $('.scroll').click(function(e){, the external links work but the links on the same page are shown in the urls in this way:example/index.php#ancla1

Instead with this value: $('a').click(function(e){no but external links do not work.

How could I make the external links work but without the links on the same page not showing this in the 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>

In php, how the links would be created on the same page, something similar to jQuery.

php

1 Answers

  1. Best Answer

    Several things:

    1. So that the external links do not harm you, you must differentiate the internal ones from the external ones....

    For example use a more specific selector

    Instead $('a').click(function(e){use $('nav li > a').click(function(e){This just takes the ainside of the liin the 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);
  });
});

    Another way is to put a class on the internals

    <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>

    So your code would be

    $(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. I don't understand why you don't want to show the #anchorin the URL?
    • 2