javascript - 使用 barba.js 在新页面中将滚动位置设置为顶部

Question

我使用下面 barba.js 文档中的代码在页面之间切换。

var FadeTransition = Barba.BaseTransition.extend({
    start: function() {
        Promise
            .all([this.newContainerLoading, this.fadeOut()])
            .then(this.fadeIn.bind(this));
    },

    fadeOut: function() {
        return $(this.oldContainer).animate({ opacity: 0 }).promise();
    },

    fadeIn: function() {
        var _this = this;
        var $el = $(this.newContainer);

        $(this.oldContainer).hide();

        $el.css({
        visibility : 'visible',
        opacity : 0
        });
        $el.animate({ opacity: 1 }, 400, function() {
        _this.done();
        });
    }
});

Barba.Pjax.getTransition = function() {
    return FadeTransition;
};

问题是在新页面中保留的滚动位置。我试图添加 $(window).scrollTop(0);在 fadeIn 函数中，但这会在按下后退按钮时产生不需要的滚动。如何解决？

下面是添加$(window).scrollTop(0);后的行为

1. 在页面 A 中，向下滚动并按链接到页面 B。页面 B 进入并在顶部滚动位置
2. 按下返回键，B页面滚动到A页面位置后淡出
3. 页面A进入并在顶部有滚动位置
4. 向下滚动并按下前进按钮。页面A滚动到顶部然后淡出
5. 页面 B 进入并在顶部滚动位置

以下是预期的行为:

1. 在页面 A 中，向下滚动并按链接到页面 B。页面 B 进入并在顶部滚动位置
2. 按下后退按钮，页面 B 淡出而不滚动
3. 页面A进入第1步并有滚动位置

Answer 1

Barba.Dispatcher.on('newPageReady', function(current, prev, container) {
    history.scrollRestoration = 'manual';
});

添加这个解决了跳跃问题。然而，这会丢失最后一页的滚动位置，即无论进入新页面还是旧页面，始终在顶部。

引用:https://github.com/luruke/barba.js/issues/133

填充:https://github.com/bfred-it/scroll-restoration-polyfill