导航到默认路线（''）导致页面滚动

Question

I'm using route.navigate() to trigger routes in my application, with pushState disabled. When triggering the default route ( router.navigate('', { trigger: true }) , the page scrolls to the top, as if a regular # link had been followed.

You can see this in action here:

https://jsfiddle.net/k58tstas/

From reading the Backbone source, it uses window.location.hash to update the URL, and when that is set to '' it translates to '#' and causes a scroll jump to that root anchor.

A quick, dirty solution is to have a named route for the default and use that, but is there a nicer way to disable this functionality?

Answer 1

If you start the router with the pushState option

Backbone.history.start( { pushState: true } );

the issue will go away (except in some older browsers). I realize you have made a conscious decision to leave it off, but unfortunately, from what I've been able to gather, turning it on is the only way to suppress that behaviour.

Answer 2

Try placing the Backbone.history.start(); before instantiating the router object.

$(function() {
   Backbone.history.start();
    window.router = new Router();

    $('.js-root').on('click', function(e) {
        e.preventDefault();

        window.router.navigate('', { trigger: true });
    });

    $('.js-queenslanders').on('click', function(e) {
        e.preventDefault();

        window.router.navigate('queenslanders', { trigger: true });
    });       
});