I use the code from barba.js documentation as below to switch between pages.

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;
};

The problem is that the scroll position retained in the new page. I tried to add $(window).scrollTop(0); inside fadeIn function, but this gives unwanted scroll when pressing back button. How can it be solved?

The following is the behavior after adding $(window).scrollTop(0);

1. in page A, scroll down and press link to page B. Page B enters and has scroll position at top
2. press back button, page B scroll to the position of page A and then fades out
3. page A enters and has scroll position at top
4. scroll down and press forward button. Page A scroll to top and then fades out
5. page B enters and has scroll position at top

The following is the expected behavior:

1. in page A, scroll down and press link to page B. Page B enters and has scroll position at top
2. press back button, page B fades out without scrolling
3. page A enters and has scroll position as step 1

I use the code from barba.js documentation as below to switch between pages.

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;
};

The problem is that the scroll position retained in the new page. I tried to add $(window).scrollTop(0); inside fadeIn function, but this gives unwanted scroll when pressing back button. How can it be solved?

The following is the behavior after adding $(window).scrollTop(0);

1. in page A, scroll down and press link to page B. Page B enters and has scroll position at top
2. press back button, page B scroll to the position of page A and then fades out
3. page A enters and has scroll position at top
4. scroll down and press forward button. Page A scroll to top and then fades out
5. page B enters and has scroll position at top

The following is the expected behavior:

1. in page A, scroll down and press link to page B. Page B enters and has scroll position at top
2. press back button, page B fades out without scrolling
3. page A enters and has scroll position as step 1

• javascript
• pjax

3 Answers 3

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

Adding this solve the jumping issue. This, however, lose the scroll position of the last page i.e. always on top no matter entering new page or old page.

reference: https://github./luruke/barba.js/issues/133

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

  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();
    });

This is how i get this to work:

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();
    });