Scrollspy使用完整的URL

Question

我想让scrollspy在使用绝对url而不是＃anchor链接时工作。

例如，我可以轻松地运行scrollspy只用<a href="#section1"></a>

我希望能够通过使用<a href="http://myurl.com/#section1"></a>

之所以这样做是为了运行scrollspy，是主页上的主要导航scorllspy，但博客不是主页的一部分。当访问博客，然后点击主页上的链接时，您将被路由到http://myurl.com/blog/#section1而不是主页ID。

我发现这个解决方案（use url and hash with bootstrap scrollspy），但无法让它充分发挥作用。经过一些调整和一些正则表达式组合后，我可以将它添加到第一个菜单项，但不会刷新。

任何想法让这个工作？有我应该使用的另一个js库吗？

解决方案感谢特洛伊

jQuery(function($){ 
    // local url of page (minus any hash, but including any potential query string) 
    var url = location.href.replace(/#.*/,''); 

    // Find all anchors 
    $('.nav-main').find('a[href]').each(function(i,a){ 
    var $a = $(a); 
    var href = $a.attr('href'); 

    // check is anchor href starts with page's URI 
    if (href.indexOf(url+'#') == 0) { 
     // remove URI from href 
     href = href.replace(url,''); 
     // update anchors HREF with new one 
     $a.attr('href',href); 
    } 

    // Now refresh scrollspy 
    $('[data-spy="scroll"]').each(function (i,spy) { 
     var $spy = $(this).scrollspy('refresh') 
    }) 
    }); 

    $('body').scrollspy({ target: '.nav-main', offset: 155 }) 

}); 

我为了得到数据偏移刷新scrollspy后重新申请加入$('body').scrollspy({ target: '.nav-main', offset: 155 })。经过一些试验和错误之后，这是我能找到的唯一解决方案。

Answer 1

方式scrollspy是编码，它看起来有href的锚以#开头。

有一种方法可以做到这一点。不漂亮，但可能工作。

一旦页面加载，在你的jQuery就绪功能，搜索所有锚的文件（你的目标容器，或身体内部），并检查是否href开始与你的主机名，其次是/#，和如果匹配改变锚的href仅仅是#

这里之后的部分是一些粗糙的代码（未测试），你可以尝试（说你scrollspy的目标是与#navbar ID的DIV：

jQuery(function($){ 
    // local url of page (minus any hash, but including any potential query string) 
    var url = location.href.replace(/#.*/,''); 

    // Find all anchors 
    $('#navbar').find('a[href]').each(function(i,a){ 
    var $a = $(a); 
    var href = $a.attr('href'); 

    // check is anchor href starts with page's URI 
    if (href.indexOf(url+'#') == 0) { 
     // remove URI from href 
     href = href.replace(url,''); 
     // update anchors HREF with new one 
     $a.attr('href',href); 
    } 

    // Now refresh scrollspy 
    $('[data-spy="scroll"]').each(function (i,spy) { 
     $(spy).scrollspy('refresh'); 
    }); 
    }); 

}); 

现在确保你运行这个后您加载bootstrap.min.js文件。

如果要初始化通过JavaScript你ScrollSpy，而不是数据 - 通过*属性，然后更换三行代码，其中scrollspy刷新机智的代码初始化你scrollspy目标&设置。

Answer 2

也可以添加data-target属性您的链接元素：data-target="#link"

<a href="http://www.site.ru/#link1" data-target="#link1">Link1</a> 
<a href="http://www.site.ru/#link2" data-target="#link2">Link2</a> 

Answer 3

我希望这有助于谁像我一样运行到这个相同的情况下任何人。

查看直播：Live Sample (Handyman Website built on WordPress, roots.io, and Bootstrap 3)

下面你可以看到，我只有条件不用时在主页上执行此。这使得滚动间谍行为在主页上保持不变，并且在从非主页页面点击时改变链接以链接到主页上它们各自的部分。

这个是我想出了（相当好测试）

只需将需要为需要替换的jQuery的/ CSS选择器。

以下是完整的片段，其使用滚动间谍，上述方案和滚动了一下切面光滑的行动

/** 
* Scroll Spy via Bootstrap 
*/ 
$('body').scrollspy({target: "#nav_wrapper", offset:50}); 

/** 
* Scroll Spy meet WordPress menu. 
*/ 
// Only fire when not on the homepage 
if (window.location.pathname !== "/") { 
    // Selector for top nav a elements 
    $('#top_main_nav a').each(function() { 
     if (this.hash.indexOf('#') === 0) { 
      // Alert this to an absolute link (pointing to the correct section on the hompage) 
      this.href = "/" + this.hash; 
     } 
    }); 
} 

/** 
* Initiate Awesome Smooth Scrolling based on a.href 
*/ 
$('a.smooth-scroll, #top_main_nav a').click(function() { 
    target = $(this).attr('href'); 
    offset = $(target).offset(); 
    $('body,html').animate({ scrollTop : offset.top }, 700); 
    event.preventDefault(); 
}); 

View it Live Here