Выделите якорь с косой чертой в конце - PullRequest
Новая
       28

Выделите якорь с косой чертой в конце

0 голосов
/ 11 октября 2019

У меня есть веб-сайт, где в разделах есть #, и пункты меню должны прокручиваться к ним. Из-за настройки веб-сайта требуется, чтобы в конце моего URL-адреса был / (косая черта).

Например, website.com/about/

Таким образом, якорь должен быть на website.com/about/#team /

Когда есть / в конце URL, прокрутка до якоря не работает. У меня нет jQuery на сайте, поэтому простой переход в раздел тоже не работает. Когда я удаляю / это работает.

Есть ли jQuery, который я могу использовать для этой цели? Я пробовал связку jQuery, но безуспешно. 

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {
    event.preventDefault();
    var hash = this.hash;
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function(){
         window.location.hash = hash;
    });
  });
});

1 Ответ

0 голосов
/ 24 октября 2019

Как вы сказали, вы не можете изменить шаблон хэша, тогда вам нужно выполнить обратный процесс: удалить дефис из this.hash, прежде чем использовать метод $ (hash) .offset () 

$(document).ready(function(){
  
  $('a').click(function(event) {

    // Store hash
    event.preventDefault();
    var hashWithoutDash = this.hash.replace("/",""); // remove dash from hash to make $(hashWithoutDash).offset() worked

    $('html, body').animate({
        scrollTop: $(hashWithoutDash).offset().top
        }, 1000, function() {
          window.location.hash = this.hash; // keep actual hash with dash
      });
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<p id="team">This is a paragraph.</p>

<div style ="height:1000px"> please scroll down to see href link </div>

<a href="#team/"> team </a>

<button>Return the offset coordinates of the p element</button>
...