Как создать ссылку на той же странице с php / jquery?

некоторые примеры того, как создать ссылку на той же странице с php тип индекса.

В jQuery я создал прокрутки аниме на ссылки с jQuery.

но в этом примере внешние ссылки не работают. Да, я меняю это значение $('a').click(function(e){ на это $('.scroll').click(function(e){ Внешние ссылки работают, но ссылки на той же странице отображаются в URL-адресах следующим образом: example/index.php#ancla1

вместо этого с этим значением: $('a').click(function(e){ нет, но внешние ссылки не работают.

Как я мог бы заставить внешние ссылки работать, но без ссылок на той же странице не показывать это в URL-адресах 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>

в php, как вы бы создать ссылки на той же странице что-то похожее на jQuery.

Author: May, 2016-09-25
Source

1 answers

Несколько вещей:

  1. Чтобы внешние ссылки не повредили вам, вы должны отличать внутренние от внешних loos....

Например, использование более конкретного селектора

Вместо этого $('a').click(function(e){ использовать $('nav li > a').click(function(e){ Это только принимаете a внутри li в 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);
  });
});

Другой способ-поместить класс В внутренние 

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

Тогда ваш код останется

$(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. я не понимаю, почему вы не хотите чудовищ #anchor в URL?
 3
Author: Sergio Rivas, 2016-09-25 17:19:39