URLs with fragment online are not properly working inside ZIM UI

[benoit74]

Since Vue.JS using is already using the fragment to indicate the URL to load inside the Vue Router, we cannot use the fragment a second time (or at least it is intercepted by the Vue application and / or not properly passed to the browser to scroll to the corresponding anchor).

We should adapt accordingly and transform the fragment into something processable by the Vue application (pretty easy to pass the information to Vue with for instance a query parameter in the URL instead of a fragment, but I have no idea how to scroll properly afterwards, to be investigated)

[benoit74]

We could also add some CSS to enhance visibility with something like:

  text-decoration-color: #0372a6;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;

And scrolling into view is just a matter of calling scrollIntoView:

var element_to_scroll_to = document.getElementById('anchorName2');
// Or:
var element_to_scroll_to = document.querySelectorAll('.my-element-class')[0];
// Or:
var element_to_scroll_to = $('.my-element-class')[0];
// Basically `element_to_scroll_to` just have to be a reference
// to any DOM element present on the page
// Then:
element_to_scroll_to.scrollIntoView();

[benoit74]

Sample Page: ID: 6848 URL: Bookshelves/Geology/Book%3A_An_Introduction_toGeology(Johnson_Affolter_Inkenbrandt_and_Mosher)/02%3A_Plate_Tectonics/2.03%3A_Convergent_Boundaries