javascript - 防止 Rails 应用程序中 Bootstrap 4 javascript 滚动 spy 的默认行为

Question

我正在构建一个 Rails 5 应用程序，并尝试将带有滚动 spy 的导航栏添加到我的登陆页面。按照 bootstrap 4 文档，我附加了一个带有 JavaScript 的滚动 spy 。但是，当我单击导航栏中的某个链接时，有时会出现闪烁。我相信这是由于默认行为造成的，我需要在 jQuery 中调用 event.preventDefault() 。

我是 jQuery 新手，这可能是一个非常简单的问题，但我该怎么做呢？在 bootstrap 4 文档中http://v4-alpha.getbootstrap.com/components/scrollspy/#example-in-navbar ，他们在 javascript 部分提到要添加滚动 spy ，只需执行以下操作:

$('body').scrollspy({ target: '#myNavbar' })

当我将其包含在 Turbolink 要求中时，效果很好:

$(document).on('turbolinks:load', function() {
      $('body').scrollspy({ target: '#myNavbar' })
});

但是，我不确定如何将事件传递给它以防止闪烁发生。

谢谢!

Answer 1

$(document).on('turbolinks:load', function(){
  $('body').scrollspy({target: "#myNavbar"});

  // Add smooth scrolling on all links inside the navbar
  $("#myNavBar 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
      $('.scrollbar,body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

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

信用:Bootstrap JS Scrollspy into a Bootstrap panel