Question

我对网络语言的经验很少，所以这可能是一个简单的错误。

我有一个内部链接的网页，如<a href="#div-id">button</a>所示。但是，由于响应式引导程序菜单，滚动有时会超调。问题完全如前一个问题所述，我试图实现已接受的解决方案：

How can I use HTML ID links with the Bootstrap navbar-header?

但是，建议的功能永远不会执行。我实现如下。作为一种万无一失的测试方法，我已经包含了两个警告语句（一个用于不相关的函数）。第一个警告语句正确执行，第二个警报语句永远不会执行。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
$(function () {                      // on document ready
    var div = $('#showOrHideDiv');   // cache <div>
    $('#action').click(function () { // on click on the `<a>`
        alert('here');               // => PROPERLY EXECUTED
        div.fadeToggle(1000);        // toggle div visibility over 1 second
    });
    // listen for click events originating from elements with href starting with #
    $('body').on('click.scroll-adjust', '[href^="#"]', function (e) {
      alert('here');                 // => NEVER EXECUTED
      var $nav;

      // make sure navigation hasn't already been prevented
      if ( e && e.isDefaultPrevented() ) return

      // get a reference to the offending navbar
      $nav = $('div.navbox')

      // check if the navbar is fixed
      if ( $nav.css('position') !== "fixed" ) return

      // listen for when the browser performs the scroll
      $(window).one('scroll', function () {
        // scroll the window up by the height of the navbar
        window.scrollBy(0, -$nav.height())
      });

    });
});

</script>

有人能指出我实施中的错误吗？

Answer 1

事实证明，还有其他被调用的功能，我不知道（感谢Jason提示）。这些脚本确保了平滑滚动，这是我使用的模板类型的常见功能，因此在此处提供我的解决方案可能很有用。

最后，我能够通过向现有功能添加几行来解决这个问题，类似于我试图实现的功能。

这是新代码，其中添加了代码注释：

$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);

  /* added by me: */
  var $x;
  var $nav;

  $nav = $('nav#tf-menu')

  if ( $nav.css('position') == "fixed" ){ $x=0; } else {$x=$nav.height()+30};
  /* end added */

  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  if (target.length) {
    $('html,body').animate({

      scrollTop: target.offset().top - 70 - $x //added the -$x
    }, 1000);
    return false;
  }
}
});
}

脚本未执行

1 个答案: