Handle internal links

Let’s say that you have an internal link in one of your post content:

<a href="#my-internal-element">Go to internal element</a>

That points to the div with id=”my-internal-element”:

<div id="my-internal-element">Here's the internal element we want to go to</div>

The thing is that internal links (beginning with “#”, also called “fragments) are considered internal routes by BackboneJs app engine, so this will result in triggering an app route that does not exist (which leads to going back to app home screen) instead of going to the “Internal element”.

To solve that, here’s what can be done:

First, add the “q-theme-prevent-navigation” class to the link to prevent the app engine from handling it as a navigation link:

<a href="#my-internal-element" class="q-theme-prevent-navigation">Go to internal element</a>

Then add the following code to your [app-theme]/js/functions.js file (or in a custom js module of your own included in your theme):

$("#app-layout").on("click", ".q-theme-prevent-navigation", function(e){
    var href = $(e.target).attr('href');
    if ( href.charAt(0) == '#' ) { //Link's href is a fragment
        var $anchor_target = $(href); //Get link's target element
        if ( $anchor_target.length ) { //Scroll to target element if exists
            var $app_screen = $(e.target).closest(".app-screen");
            $app_screen.animate({
                scrollTop: $anchor_target.position().top
            }, 500);
        }
    }
});

This makes the app screen scrolling to your target internal element when clicking on an internal link.