Плавная прокрутка номера вопроса - PullRequest
Новая
       45

Плавная прокрутка номера вопроса

0 голосов
/ 06 апреля 2020

Я работаю над сайтом и на панели навигации есть ссылка "Функции". Когда на главной странице нажата кнопка «Возможности», она прокручивается вниз до H1 с id = «expo-features» (здесь упрощенно): 

<div class="topnav-right">
      <a href="#expo-features">Features</a>
      <a href="register.php">Registration</a>
      <a href="booth.php">Reserve A Booth</a>
      <a href="sponsor.php">Sponsor Event</a>
      <a href="contact.php">Contact</a>
</div>

/*Scrolls to this section*/

<h1 id="expo-features">Expo Features</h1>

I добавил в голову какой-нибудь скрипт, чтобы сделать эту работу: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

Все отлично работает! Он прекрасно прокручивается до идентификатора экспо-функций. Конечно, так как это в моей навигации, оно появляется на других страницах. Поэтому мне нужно, чтобы он мог ссылаться на тот же раздел (очевидно, он не будет прокручиваться к нему, так как он идет на другую страницу - но это нормально). На некоторых моих страницах это работает.

Тем не менее, у меня есть 2 страницы, которые имеют свои уникальные ссылки id # с тем же скриптом в голове. Но кнопка «Функции», которая находится в навигационной панели, теперь не прыгает на этих 2 страницах. Я не могу понять, почему?

Короче говоря: вот мой сайт

  • Кнопка "Функции" в nav id # ссылки на раздел на домашней странице
  • Работает на домашней странице, странице регистрации и странице контактов
  • Кнопка «Функции» не работает на странице стенда и странице спонсора и я думаю, что это потому, что эти страницы имеют свои собственные уникальные id # ссылки с тем же сценарием в голове.
  • И да, на других страницах кнопка "Функции" href = "https://virtualdigitalexpo.com/#expo - особенности "

1 Ответ

0 голосов
/ 06 апреля 2020

Это потому, что вы только проверяете, имеет ли якорь значение hash, установленное в href, в то время как вам также необходимо проверить, действительно ли якорь указывает на текущий документ.

Это может быть легко достигается путем построения пути вашего якоря без ха sh: 

// builds an URL path without the hash
function buildPath( url ) {
  return url.origin + url.pathname + url.search;
}

и сравнения его с указанным в вашем документе. Обратите внимание, что вы не можете использовать window.location, потому что ваши HTML якоря будут использовать это не как baseURI , а как значение document.baseURI, которое можно изменить, например, с помощью <base> element.
Итак, нам нужно создать новый экземпляр URL из этого базового URI: 

const doc_URI = new URL( document.baseURI );

И мы готовы к go: 

document.onclick = (evt) => {
  const target = evt.target;
  if( target.matches( 'a' ) ) {
    evt.preventDefault();
    const doc_URI = new URL( document.baseURI );
    const is_valid_anchor = target.hash !== "" &&
      buildPath( target ) === buildPath( doc_URI );
    console.log( 'is valid', is_valid_anchor );
  }
};
// builds an URL path without the hash
function buildPath( url ) {
  return url.origin + url.pathname + url.search;
}
a { display: block; }
<a href="#foo">"#foo" (same)</a>
<a href="/some-other-page/#foo">"/some-other-page/#foo" (different)</a>
<a href="?bar=baz#foo">"?bar=baz#foo" (different)</a>
<a href="">"" (different)</a>
<a href="https://stacksnippets.net/js#foo">"https://stacksnippets.net/js#foo" (same)</a>
<a href="http://stacksnippets.net/js#foo">"http://stacksnippets.net/js#foo" (different)</a>

Так в вашем коде это даст 

$("a").on('click', function(event) {

  // Make sure this.hash has a value before overriding default behavior
  // And that it points to the current document
  var doc_URI = new URL( document.baseURI );
  if (this.hash !== "" && buildPath( this ) === buildPath( doc_URI )) {
    // the rest of your code
...