scrollspy
的编码方式,它查看具有以href
开头的#
的锚点。
我正在尝试使用绝对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();
});
只需将此onclick函数添加到锚标记,就应该完成!
<a href="#" onclick="window.location.href='https://www.google.com/'" class="nav-link">Google</a>
scrollspy
的编码方式,它查看具有以href
开头的#
的锚点。
或者您可以将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)
只需将此onclick函数添加到锚标记,就应该完成!