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

【问题标题】：Set scroll position to top in new page using barba.js使用 barba.js 在新页面中将滚动位置设置为顶部
【发布时间】：2017-12-02 07:58:53
【问题描述】：

我使用 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);后的行为

在页面 A 中，向下滚动并按链接到页面 B。进入页面 B 并在顶部具有滚动位置
按返回键，B页滚动到A页的位置，然后淡出
页面 A 进入并在顶部有滚动位置
向下滚动并按下前进按钮。 Page A 滚动到顶部然后淡出
页面 B 进入并在顶部有滚动位置

以下是预期的行为：

在页面 A 中，向下滚动并按链接到页面 B。进入页面 B 并在顶部具有滚动位置
按下返回按钮，页面 B 淡出而不滚动
页面A进入，滚动位置为第1步

【问题讨论】：

标签： javascript pjax

【解决方案1】：

  fadeIn: function() {

    $(window).scrollTop(0); // scroll to top here

    var _this = this;
    var $el = $(this.newContainer);

    $(this.oldContainer).hide();

    $el.css({
      visibility : 'visible',
      opacity : 0
    });

    $el.animate({ opacity: 1 }, 400, function() {
      /**
       * Do not forget to call .done() as soon your transition is finished!
       * .done() will automatically remove from the DOM the old Container
       */

      _this.done();
    });

【讨论】：

谢谢。不幸的是，将 scrollTop 放在 fadeIn 函数中的位置没有任何区别。

【解决方案2】：

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

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

参考：https://github.com/luruke/barba.js/issues/133

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

【讨论】：

【解决方案3】：

这就是我让它工作的方式：

fadeIn: function() {
    /**
     * this.newContainer is the HTMLElement of the new Container
     * At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden)
     * Please note, newContainer is available just after newContainerLoading is resolved!
     */

    var _this = this;
    var $el = $(this.newContainer);

    $(this.oldContainer).hide();

    $el.css({
      visibility : 'visible',
      opacity : 0
    });

    $("html, body").animate({ scrollTop: 0 }, "slow");

    $el.animate({ opacity: 1 }, 400, function() {
      _this.done();
    });

【讨论】：