Question

我正在尝试使用绝对网址而非＃锚链接时使用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库吗？

解决方案感谢Troy

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属性添加到您的链接元素：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 ready函数中，搜索文档中的所有锚点（目标容器或正文内部），并检查href是否以您的主机名开头，然后是/#，如果匹配，则将锚点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目标＆amp;设置。

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

Answer 4

只需将此onclick函数添加到锚标记中，就应该完成！

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

Scrollspy使用完整URL

4 个答案: