Change DOM with object when clicking the BACK or FORWARD button

Question

Web Setup

• I have tab-pane that are active.
• Elements that bounce to other elements and trigger other tabs.
• Using Bootstrap and jquery.

GOALS

• When user clicks a navigation link I store the elements ID and the active PANE into the URL as a hash. http://www.mywebsite.com/#pane#id
• I'd like to store this into the browser history so when the user presses the BACK or FORWARD button I can pull down that BACK url parse out the location activate the PANE and scrollTop to the element `ID'.
• Obviously when the BACK or FORWARD button leaves our domain I'd like to warn the user before leaving the page.
• I would like this to work on browsers IE8 and forward. Current FireFox, CHROME and OPERA.
• BONUS if this would work in Mobile Webviews.

Research

• I found the links and projects below but I'm not sure if these are the most current or best solutions to my problem.

https://github.com/blixt/js-hash

Keeping history of hash/anchor changes in JavaScript

How to get the anchor from the URL using jQuery?

Questions

• Is this even possible as I read that you can't change the BROWSER HISTORY -- which makes sense.
• Are the above projects a good fit or is there a better solution that can meet my wish list?
• Is it possible to create a global jquery click listener that runs before any of my other listeners that simply gets the element ID and active PANE then stores them into an Array. I would simply intercept the back/forward button events grab that Array object and set the DOM from it.

Thanks for your help!

Answer 1

// Change HASH on clicking NAV buttons. 
$(function(){
  var hash = window.location.hash;
  //hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    $('html,body').animate({scrollTop: $('#top').offset().top});
    window.location.hash = this.hash;
    _ignoreHashChange = true;
    console.log(this.hash);

  });
});

    // Updating the dom with hashchange.
//_ignoreHashChange = true; //after clicking a butotn. 
_ignoreHashChange = false;
$(window).on('hashchange', function (e) {
    if(_ignoreHashChange === false ){
        if ( window.location.hash.split('#')[1].length ) {
            if ( window.location.hash.split('#')[1][0] !== "." ) {
                $('.nav-tabs a[href="#'+ window.location.hash.split('#')[1] +'"]')[1].tab('show');
                $('html,body').animate({scrollTop: $('#top').offset().top});
            }
            else {
                $(window.location.hash.split('#')[1]).trigger("click");
            }
            _ignoreHashChange = false;
        }
    }
    _ignoreHashChange = false;
});