Плавная прокрутка работает для navbar, но не для других элементов (стрелки и т. Д.)

Question

У меня есть приложение Rails, которое использует функцию плавной прокрутки jQuery. Плавная прокрутка работает для ссылок навигационной панели, но не для стрелки «прокрутка вниз» или «вверх». Я попытался добавить тег сценария для реализации поведения непосредственно на элементе, но не повезло. Любые рекомендации приветствуются!

Вот функция прокрутки -

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });

  

Вот блок со стрелкой вниз. Парень с (некоторый текст здесь) не в моем реальном коде, я просто изменил его для S / O. -

<div class="typebox" style="min-height: 119px;">
	  <div id="typed-strings">
	  <h3 class="type-active"><strong style="font-size: 20px; line-height: 1.5em;"> (some text here) <br> (some more text here) &nbsp; <br><br><a href="#web-apps"><%= image_tag "down-arrow.png", class: "down-arrow"%></a></strong></h3>
	 </div> 
	 <span id="typed"></span>	
	 <br />
	</div>

Answer 1

Я не могу найти ваш код по ссылке, но, увидев ваш сайт, я могу подумать о нескольких вещах:

1) стрелка вниз отсутствует при установке обратного вызова щелчка, она добавляется позже с этим типизированным эффектом, поэтому обратный вызов щелчка не устанавливается для этого тега A. Я предполагаю, что в библиотеке, которую вы использовали для этого, есть какое-то событие, чтобы сообщить вам, что эффект закончен, тогда вы можете установить обратный вызов для этого тега A

2) стрелка «вверх наверх» имеет href="#", которая явно НЕ выбрана для функции щелчка со строкой .not('[href="#"]'), я предполагаю, что вы скопировали функцию откуда-то еще, вы можете добавить идентификатор после href Вернуться к началу Тег и добавить элемент с этим идентификатором вверху сайта

---

РЕДАКТИРОВАТЬ: чтобы исправить слушатель события стрелки вниз, я бы сделал это:

1-й, переместите функцию за пределы параметров

function scroll_to_hash(event) {
  // On-page links
  if (
    location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
    && 
    location.hostname == this.hostname
  ) {
    // Figure out element to scroll to
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    // Does a scroll target exist?
    if (target.length) {
      // Only prevent default if animation is actually gonna happen
      event.preventDefault();
      $('html, body').animate({
        scrollTop: target.offset().top
      }, 1000, function() {
        // Callback after animation
        // Must change focus!
        var $target = $(target);
        $target.focus();
        if ($target.is(":focus")) { // Checking if the target was focused
          return false;
        } else {
          $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
          $target.focus(); // Set focus again
        };
      });
    }
  }
}

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(scroll_to_hash);

2-й, я предполагаю, что вы используете Typed.js, у вас есть onComplete обратный вызов https://mattboldt.com/typed.js/docs/,, затем вы можете установить событие щелчка для стрелки вниз на этом обратном вызове в опциях при инициализации плагин

onComplete: function(self) {
  $('a[href="#web-apps"]').click(scroll_to_hash)
}