2

一直在尝试在我的导航栏（例如博客）的末尾添加外部链接，以及链接到其他 .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 在另一篇处理稍微不同的问题的帖子上给出了提示（也许？），但我不确定如何添加它以便解决我的问题。

链接在这里：如何为 Bootstrap 的滚动间谍功能添加平滑滚动

感谢您的宝贵时间！

- 更新 -

我发现问题出在哪里，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 );                                              

        });

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

有任何想法吗 ？

4

2 回答 2

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

        });
于 2013-09-18T08:53:40.757 回答
0

不要删除整个代码，因为你会丢失整个滚动动画，不调用函数就足够了e.preventDefault();，删除它，一切都会好起来的。

于 2015-07-09T16:10:14.130 回答