Scrollspy使用完整URL

Question

我正在尝试使用绝对URL而不是#锚链接使用scrollspy.

例如,我可以通过仅使用来轻松运行scrollspy <a href="#section1"></a>

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

这样做的原因是,主页上的主要导航是scorllspy,但博客不是主页的一部分.访问博客然后单击主页上的某个链接时,您将被路由到http://myurl.com/blog/#section1而不是主页ID.

我找到了这个解决方案(使用url和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 })

});

我添加$('body').scrollspy({ target: '.nav-main', offset: 155 })了以便在刷新scrollspy后重新应用数据偏移量.经过一些反复试验,这是我能找到的唯一解决方案.

Answer 1

或者您可以data-target为link元素添加属性: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 2

该方式scrollspy是编码的，它查看具有href以 开头的锚点#。

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

页面加载后，在 jQuery 就绪函数中，搜索文档中的所有锚点（目标容器或主体内部），并检查是否以您的主机href名开头，后跟/#，如果匹配，则更改锚点的href只是后面的部分#

这是一些您可以尝试的粗略代码（未测试）（假设您的scrollspy目标是一个id为的div #navbar：

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，而不是通过 data-* 属性，则将刷新 scrollspy 的三行代码替换为初始化目标scrollspy和设置的代码。