Anchor tags are not working in Tizen Web App

Question

I am creating a Tizen Web App for wearable device and i want to route to a certain point on a separate page but anchor tags don't seem to be working. They route me to the page, but just to the top of the page.

I've tried these 3 options, the first one routes me to the top of the page no matter how far down the tag is and the other two don't work at all.

I've also tried doing it with the second page in a seperate HTML using href="flags.html#A" and this also routed to the top of the page.

I also tried using 'name' instead of 'id' and a 'div' tag in place of an 'a' tag with the same results.

<div class="ui-page ui-page-active" id="main">
    <div class="ui-content">
      <ul class="ui-listview">
          <li><a href="#flags">A
              <i>Alfa</i></a></li>
          <li><a href="#flags#B">B
              <i>Bravo</i></a></li>
          <li><a href="#flagsC">C
              <i>Charlie</i></a></li>
      </ul>
    </div>
</div>
<div class="ui-page" id="flags">
    <header class="ui-header">
        <h2 class="ui-title">Select Flag</h2>
    </header>
    <div class="ui-content">
        <a id="A">A-Alfa</a><br>
            <a><b>International Call Signals</b><br>I have a diver down; keep well clear at slow speed</a><br>
        <a id="B">B-Bravo</a><br>
            <a><b>International Call Signals</b><br></a><br>
        <a id="flagsC">C-Charlie</a><br>
            <a><b>International Call Signals</b><br>Affirmative</a><br>
    </div>
</div>

Any help would be hugely appreciated

Answer 1

Not the cleanest solution but i ended up using a javascript function to achieve my goal.

function loadPage2(flagSelection) {
    window.localStorage.setItem("flagSelected", flagSelection);
    location.href="flagsPage.html";
}

triggered by;

<li><a onclick=loadPage2("#A");>A
    <i>Alfa</i></a></li>
<li><a onclick=loadPage2("#B");>B
    <i>Bravo</i></a></li>
<li><a onclick=loadPage2("#C");>C
    <i>Charlie</i></a></li>

and on the second page;

var flagSelection = window.localStorage.getItem("flagSelected");

function jumpToFlag() {
    location.href="#";
    location.href=flagSelection;
}

const load = () => {
    console.log("load event detected!");
}   
window.onload = jumpToFlag();