从其他页面访问时Bootstrap scrollspy

时间:2015-06-09 01:02:39

标签: jquery html twitter-bootstrap twitter-bootstrap-3

我试图链接到我的主页的特定部分,同时保持滚动间谍功能。

使用此代码:

<li><a href="#sec1">About</a></li>

scrollspy正在运行但是如果我尝试从我的主页以外的页面访问它,它只会将"#sec1"添加到当前页面的网址,无效。

如果我将其更改为:

<li><a href="/#sec1">About</a></li>

它将我带到主页上的正确部分,但是scrollspy功能不再有效。

js代码

$(function(){/* smooth scrolling for scroll to top */
     /* highlight the top nav as scrolling occurs */
     $('body').scrollspy({ target: '#navbar' })
});

有什么想法吗?

2 个答案:

答案 0 :(得分:2)

你可以尝试

 $(document).on("mouseover", '#chart text[fill="rgba(60,60,60, 0.9995)"]', function(){
          $('#chart text[fill="rgba(60,60,60, 0.9995)"]').css("cursor", "pointer");
        });

此代码将分割url以获取sec1或sec2 ....然后滚动到id =“sec1”的div

我的意思是,如果您将另一个页面重定向到www.website.com/anything#sec1,它会将页面滚动到id为“sec1”的div

看看这个DEMO

你可以看到这个Jsffidle

答案 1 :(得分:1)

@ Mohamed-Yousef的答案的另一种选择是通过这样做simulate the click在链接上

$(document).ready(function() {
    // workaround for deep link via anchor
    var stripped_url = window
                    .location
                    .toString()
                    .split("#");
    if (stripped_url.length > 1) {
        var activeId = "#nav-deep-" + stripped_url[1];
        $(activeId)[0].click();
    }
});

jQuery选择器在链接元素上需要适当的ID,例如<a id="nav-deep-sec1" href="#sec1">About</a>

一种避免额外ID的更优雅的解决方案是通过这样做select the first link which points to the anchor

$(document).ready(function() {
    // workaround for deep link via anchor
    var stripped_url = window
                    .location
                    .toString()
                    .split("#");
    if (stripped_url.length > 1) {
        $("a[href='#"+stripped_url[1]+"']")[0].click();
    }
});