这个问题主要是由于WordPress的默认行为导致的,即当使用jQuery插入新内容时,jQuery会首先将文档主体滚动到顶部,然后再将新内容添加到文档中。这就导致了Barba.js滚动恢复插件失效的问题。
通过禁用WordPress默认行为,可以解决这个问题。可以使用以下代码片段禁用默认行为:
$(document).ready(function(){
$(document).on('click', 'a', function(e){
e.preventDefault();
var href = $(this).attr('href');
Barba.Pjax.goTo(href);
});
});
另外,也可以尝试通过以下代码片段重新初始化Barba.js来解决该问题:
$(function() {
Barba.Pjax.getTransition = function() {
return NoneTransition
};
Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container, newPageRawHTML) {
var scripts = $(newPageRawHTML).filter('script');
container.append(scripts);
var $head = $(newPageRawHTML).filter('head').html();
document.head.innerHTML = $head;
var page = $(newPageRawHTML).find('#barba-wrapper').html();
container.html(page);
Barba.Pjax.originalPageHTML = $('html').clone();
Barba.Pjax.scrollTop = 0; // scrolls page to the top
Barba.Utils.chain([reset]);
});
});