从另一个页面访问时引导滚动间谍

Posted 2023-03-05

【中文标题】从另一个页面访问时引导滚动间谍

【英文标题】：Bootstrap scrollspy when accessing from another page

【发布时间】：2015-08-23 15:28:26

【问题描述】：

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

使用此代码：

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

scrollspy 正在运行，但如果我尝试从主页以外的页面访问它，它只会将 "#sec1" 添加到当前页面的 url，没有效果。

如果我将其更改为：

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

有什么想法吗？

【参考方案1】：

你可以试试

$(document).ready(function()
    var href = window.location.href; 
    var splitit = (href.split('#'))[1]; //split url to get sec1 name
    if(splitit !== "" || splitit !== "undefined")
        $('html, body').animate(
            scrollTop: $('#'+splitit).offset().top
        , 2000);
    
);

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

我的意思是，如果您将另一个页面重定向到 www.website.com/anything#sec1，它会将页面滚动到 id="sec1"

看看这个DEMO

你可以看到这个Jsffidle

【参考方案2】：

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