平滑滚动适用于导航栏，但不适用于其他元素（箭头等）

Question

我有一个使用 jQuery 平滑滚动功能的 Rails 应用程序。平滑滚动适用于导航栏链接，但不适用于“向下滚动”箭头或“返回顶部”箭头。我尝试添加一个脚本标记来直接在元素上实现该行为，但没有运气。任何建议表示赞赏！

这里是滚动功能-

// 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 之后添加一个id为此返回顶部一个标签并在网站顶部添加一个具有该 ID 的元素

---

编辑：要修复向下箭头事件侦听器，我会这样做：

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

第二，我猜你正在使用 Typed.js，你有一个 onComplete 回调 https://mattboldt.com/typed.js/docs/，然后你可以在初始化插件时为该回调上的向下箭头设置点击事件

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