Is It Possible to Override Behavior of ons-button-back But Keep Default Animation?

I’m working on a small single page application in Onsen UI. It presents multiple screens that collect form data, all of which gets submitted to a mySql database on the backend on the last page template. As users are free to move back and forth through previously loaded templates, I’ve overridden the behavior of the Onsen back button to bring a previously visited page to the top of the navigation stack, rather than pop it off the stack. This is working, but I’d like to maintain the default animation of the back button. What is currently happening is I’m getting the same animation effect that occurs by default when a regular Onsen button is clicked. Is it possible to maintain the default back button animation behavior (e.g., slide out vs. slide in)?

If not, I’m wondering if it would be possible to define my own class that inherits most of the behavior from ons-back-button, but overrides just the stack navigation behavior (bring a page to the top of the stack rather than popping it)? I haven’t really worked with the new ES6 classes yet, so thought I’d ask here before trying that approach.

Here’s the current code I’m using for the back button:

document.querySelector('ons-back-button').onClick = function() {
   previous('page1.html');       
};

function previous(page){
    const prevNav = document.querySelector('#navigator');
    prevNav.bringPageTop(page);
}
      

And here’s the navigator element HTML:

<ons-splitter>
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
        <ons-page>
            <ons-list>
                <ons-list-item onclick="fn.load('page1.html')" tappable>Vehicle Information</ons-list-item>
                <ons-list-item onclick="fn.load('page2.html')" tappable>Exterior Damage</ons-list-item>
                <ons-list-item onclick="fn.load('page3.html')" tappable>Glovebox Check</ons-list-item>
                <ons-list-item onclick="fn.load('page4.html')" tappable>Interior Check</ons-list-item>
                <ons-list-item onclick="fn.load('page5.html')" tappable>Road Test</ons-list-item>
                <ons-list-item onclick="fn.load('page6.html')" tappable>Lights Check</ons-list-item>
                <ons-list-item onclick="fn.load('page7.html')" tappable>Fluid Inspection</ons-list-item>
                <ons-list-item onclick="fn.load('page8.html')" tappable>Tire Inspection</ons-list-item>
                <ons-list-item onclick="fn.load('signature.html')" tappable>Signature</ons-list-item>
            </ons-list>
        </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content">
        <ons-navigator animation="slide" animation-options="{ duration: 0.3 }" id="navigator" page="page1.html">        
        </ons-navigator>
    </ons-splitter-content>
</ons-splitter>