Scrollspy使用完整URL

问题描述 投票:9回答:4

我正在尝试使用绝对URL而不是#锚链接时使scrollspy正常工作。

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

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

之所以这样做,是因为主页上的主要导航很麻烦,但是博客不是主页的一部分。当访问博客,然后单击主页上的链接时,您将被路由到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之后获得重新应用的数据偏移量。经过反复试验,这是我能够找到的唯一解决方案。

我正在尝试使用绝对URL而不是#锚链接来使scrollspy正常工作。例如,我可以只使用即可轻松运行scrollspy ...

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

您有一种方法可以做到这一点。不漂亮,但可能会起作用。

一旦页面加载,在jQuery ready函数中,在文档中搜索所有锚点(在目标容器或主体内部),并检查href是否以您的主机名开头,后跟a/#,如果匹配,则将锚点的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目标和设置。

或者您可以将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>

我希望这对遇到和我一样的情况的人有所帮助。

实时查看: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

只需将此onclick函数添加到锚标记,就应该完成!

<a href="#" onclick="window.location.href='https://www.google.com/'" class="nav-link">Google</a>
twitter-bootstrap href scrollspy
4个回答
4
投票

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


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>

0
投票

我希望这对遇到和我一样的情况的人有所帮助。

实时查看:Live Sample (Handyman Website built on WordPress, roots.io, and Bootstrap 3)


0
投票

只需将此onclick函数添加到锚标记,就应该完成!

© www.soinside.com 2019 - 2024. All rights reserved.