Question

尝试在导航栏的末尾添加外部链接（例如博客），以及链接到其他.html文件的其他下拉列表，但它无法正常工作。

这是代码。我应该修改什么才能允许这些非#links？

<div id="navbar-section" class="navbar navbar-static-top">
  <div class="container">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <div id="navbar-spy" class="nav-collapse collapse navbar-responsive-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#home"><i class="icon-home"></i></a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Infos <span class="caret"></span></i></a>
              <ul class="dropdown-menu">
                <li class="nav-header">Menu 1</li>
                <li>
                  <a href="external1.html">external 1</a>
                </li>
                <li>
                  <a href="external2.html">external 2</a>
                </li>
                <li class="nav-header">Menu 2</li>
                <li>
                  <a href="external3.html">external 3</a>
                </li>
                <li>
                  <a href="external4.html">external 4</a>
                </li>
                </li>
              </ul>
        </li> 
    </div>
  </div>
</div>

顺便说一句，Dologan在另一篇文章中提出了一个暗示（可能？）处理一个稍微不同的问题，但我不确定如何添加它以便它可以解决我的问题。

此处链接：How to add smooth scrolling to Bootstrap's scroll spy function

感谢您的赞赏！

- 更新 -

我发现问题出在哪里，这段代码在custom.js文件中：

$( '#navbar-spy' ).off( 'click' ).on( 'click', 'a', function( e ) {         

            e.preventDefault();

            var elmHash = $( this ).attr( 'href' );
            var elmOffsetTop = Math.ceil( $( this.hash ).offset().top );
            var windowOffsetTop = Math.ceil( $(window).scrollTop() );

            if( elmOffsetTop != 0 ) {
                elmOffsetTop = elmOffsetTop - 70;
                if( windowOffsetTop == 0 ) {
                    elmOffsetTop = elmOffsetTop - 70;
                }
            }

            //console.log( $( this ).attr( 'href' ) );              
            $( 'html:not(:animated), body:not(:animated)' ).animate({ scrollTop: elmOffsetTop }, 1100 );                                              

        });

评论整个部分解决了我的问题，但是我失去了很好的滚动效果。尝试了一些事情，但我无法使外部链接和滚动效果有效。

有什么想法吗？

Answer 1

您的问题无法明确您的问题所在。外部链接没有哈希值，因此elmOffsetTop = Math.ceil( $( this.hash ).offset().top );会出错。

在您的javascript开头添加if(!$( this ).attr( 'href' ).match(/^#/)) return;以防止此错误：

$( '#navbar-spy' ).off( 'click' ).on( 'click', 'a', function( e ) {         

            if(!$( this ).attr( 'href' ).match(/^#/)) return;  
            e.preventDefault();

            var elmHash = $( this ).attr( 'href' );
            var elmOffsetTop = Math.ceil( $( this.hash ).offset().top );
            var windowOffsetTop = Math.ceil( $(window).scrollTop() );

            if( elmOffsetTop != 0 ) {
                elmOffsetTop = elmOffsetTop - 70;
                if( windowOffsetTop == 0 ) {
                    elmOffsetTop = elmOffsetTop - 70;
                }
            }

            //console.log( $( this ).attr( 'href' ) );              
            $( 'html:not(:animated), body:not(:animated)' ).animate({ scrollTop: elmOffsetTop }, 1100 );                                              

        });

Answer 2

不要删除整个代码，因为你将失去整个滚动动画，只需不调用函数{FNC1}010031234567890621123456789012{FNC1}300144就可以删除它，一切都会好的。

BootStrap 3上的Navbar-spy不允许外部链接

2 个答案: