使用完整 URL 的 Scrollspy

Question

当使用绝对 url 而不是 # 锚链接时，我试图让 scrollspy 工作。

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

我希望能够使用 <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 })

});

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

Answer 1

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

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

页面加载后，在您的 jQuery 就绪函数中搜索文档以查找所有锚点（在您的目标容器或正文中），并检查 href 是否以您的主机名开头，然后是 a@987654326 @，如果匹配，则将锚点的 href 更改为 # 之后的部分

这里有一些粗略的代码（未经测试），你可以试试（比如你的 scrollspy 目标是一个 id 为 #navbar 的 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 而不是通过 data-* 属性初始化 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 选择器。

这里是完整的 sn-p，它使用 scroll spy、上述解决方案和一些平滑的部分滚动操作

/**
 * 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

Answer 4

只需将此 onclick 函数添加到锚标记即可！

<a href="#" onclick="window.location.href='https://www.google.com/'" class="nav-link">Google</a>