10

当使用绝对 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 后重新应用数据偏移量。经过反复试验，这是我能找到的唯一解决方案。

4

4 回答 4

37

或者您可以将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>
于 2014-02-09T20:52:11.020 回答
4

方式scrollspy是编码的，它查看以href's 开头的锚点#。

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

页面加载后，在您的 jQuery 就绪函数中搜索文档以查找所有锚点（在目标容器或正文中），并检查是否href以您的主机名开头，后跟 a /#，如果匹配，则更改锚点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 而不是通过 data-* 属性来初始化 ScrollSpy，则使用代码替换刷新 scrollspy 的三行代码以初始化您的scrollspy目标和设置。

于 2014-01-15T00:57:54.583 回答
0

I hope this helps anyone who runs into this same situation as I did.

View it live: Live Sample (Handyman Website built on WordPress, roots.io, and Bootstrap 3)

You can see below that I conditionally only perform this when not on the homepage. This leaves the scroll spy behavior untouched on the homepage and alters the links to link to their respective sections on the homepage when clicked from non-homepage pages.

This is what I came up with (fairly well tested)

You would simply need to replace the jQuery/css selectors as needed.

Here is the full snippet which is using scroll spy, the above solution, and a bit of smooth section scrolling action

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

于 2014-04-17T04:22:11.657 回答
0

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

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

于 2020-03-09T06:22:38.777 回答