Bootstrap scrollspy: <a href="page.html"> 不会工作

Question

更新 1：JSFIDDLE http://jsfiddle.net/xz4xsc2r/1/

我使用 bootstrap 和 scroll-spy 创建了一个网站，以便在页面上移动并根据您正在阅读的部分更改导航栏。该网站有 2 个页面。第一个是使用 scroll-spy 的地方。第二个包含一些其他重要信息。

我的导航栏有 4 个 link，其中 3 个 link 指向同一页面中的锚点，而 1 个 link 指向另一个页面。代码：

        <div id="scroll-spy-target" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#first">Início</a></li>
                <li><a href="#ss-produtos">Produtos</a></li>
                <li><a href="#ss-equipe">Equipe</a></li>
                <li><a href="#ss-contato">Contato</a></li>
                <li><a href="page2.html">Curvas</a></li>
            </ul>
        </div>

问题：当我点击 Curvas 时，没有任何反应。我没有被重定向到 page2.html.

问题：如果我删除 id="scroll-spy-target" 那么一切正常，但我失去了 scrollspy 的功能。我如何保持 scroll-spy 并使 link 工作？

非常感谢您的帮助！！！

Answer 1

来自boostrap website。将 data-spy 和 data-target 添加到您的 body 标签其中数据目标是导航栏的 class。例如：

<body data-spy="scroll" data-target=".navbar-fixed-top">
   <nav class="navbar navbar-inverse navbar-fixed-top">

Answer 2

出现问题是因为我使用了一个函数来平滑单击锚点时的滚动。 javascript 函数是：

    $("#scroll-spy-target a").click(function(e) {
        e.preventDefault();

        var pageRef = $(this).attr("href");
        var pageRefPosition = $(pageRef).offset().top ;

        $("html,body").animate({
            scrollTop:pageRefPosition
        },400);
    });

从点击的锚点 <a> 中获取 href 属性，计算其偏移量并滚动页面（在 400 毫秒内）。然后出现问题，因为我的 link 存储在 <a> 标签内，所以它没有加载页面，而是尝试滚动到 link，所以什么也没有发生。

解决方案是在 <a> 标签内发现 link 时更改加载页面：

    $("#scroll-spy-target a").click(function(e) {
        e.preventDefault();

        var pageRef = $(this).attr("href");

        if(pageRef[0] != '#') {
            window.location.href = pageRef;
        } else {
            var pageRefPosition = $(pageRef).offset().top ;

            $("html,body").animate({
                scrollTop:pageRefPosition
            },400);
        }
    });

因为锚点总是以 # 开头，其他任何东西都必须是 link（假设）。

Bootstrap scrollspy: <a href="page.html"> 不会工作

Bootstrap scrollspy: <a href="page.html"> won't work

html

css

jquery

twitter-bootstrap

scrollspy