Keep anchor tag href from jumping to it's page

Question

I have the following anchor tag in my HTML that I use to load contents from that HTML location into a contents div on the current page. This anchor tag is part of Bootstrap treeview plugin I use for generating a table of contents:

<a href="/Introduction/index.html#1-1-overview1" style="color:inherit;">1.1 Overview</a>

In my JavaScript, I have the following code I use to listen for two events. One for the anchor tag so that I disable the default behavior and the other to process the anchor tag and load the contents and scroll to the anchor as follows:

    $("a[href*='#']").click(function(e) {
        e.preventDefault();
    });

    // Add smooth scrolling to all links inside a navbar
    $treeview.on('nodeSelected', function (e, data) {
        e.preventDefault();

        if (data && data.href !== "") {
            // Split location and hash
            var hash = data.href.match(/[#].*/g)[0];
            var location = data.href.match(/[^#]*/g)[0];

            if (prevLocation === location) {
                // Don't reload page if already at same location as last clicked
                $('html, body').animate({
                    scrollTop: $(hash).offset().top - 55
                }, 200);
            } else {
                prevLocation = location;
                $('#contents').load(location, function () {
                    $('html, body').animate({
                        scrollTop: $(hash).offset().top - 55
                    }, 200);
                });
            }

        }
        $body.scrollspy('refresh');
        $sideBar.affix('checkPosition');
    });

What I am seeing is that the first time a click a node in my TOC, it loads the HTML into the contents div as expected but the second time I click it, it loads the HTML page that is referenced in the anchor tag despite my efforts to track if I previously loaded it as I do with the conditional logic above. I also notice that on the subsequent click, the anchor selector is not being called.

Any idea how I can accomplish having the TOC initially load the HTML from another page into the current page and then on subsequent calls just scroll to the anchor location (ie., chapter)?

Answer 1

Combining the two functions and returning false appears to work as follows:

     $("a[href*='#']").click(function(e) {
        e.preventDefault();

        if (this && this.href !== "") {
            // Split location and hash
            var hash = this.href.match(/[#].*/g)[0];
            var location = this.href.match(/[^#]*/g)[0];

            if (prevLocation === location) {
                // Don't reload page if already at same location as last clicked
                $('html, body').animate({
                    scrollTop: $(hash).offset().top - 55
                }, 200);
            } else {
                prevLocation = location;
                $('#contents').load(location, function () {
                    $('html, body').animate({
                        scrollTop: $(hash).offset().top - 55
                    }, 200);
                });
            }

        }
        $body.scrollspy('refresh');
        $sideBar.affix('checkPosition');
        return false;
    });