mercredi 20 mars 2019

Cannot get HTML anchors to work when opening URL with Chrome Ember.js

I have the following simple ember application (only an application.hbs file).

Here I have several anchors and would like the user to click on one and get to that section of the page (much like what is used in wikipedia).

Here's the problem. If I click one of the links at the top, it works. However, if I am in Chrome and I type in an anchor url (I.E. localhost:4200/#midnight_love), the the URL will load the Ember app, but fail to jump to the anchor. I have found that this only occurs in Chrome and that the site will jump to the anchor in both Firefox and Internet Explorer. All the code needed to recreate this problem is given below if you simply copy/paste into your application.hbs of an ember app.

Also note that this exact same code would work across all browsers, had I pasted this code simply into an HTML file.

Application.hbs

<ul>
<li class="toclevel-2 tocsection-3"><a href="#Early_career"><span class="tocnumber">2.1</span> <span class="toctext">Early career</span></a></li>
<li class="toclevel-2 tocsection-4"><a href="#Initial_success"><span class="tocnumber">2.2</span> <span class="toctext">Initial success</span></a></li>
<li class="toclevel-2 tocsection-5"><a href="#What's_Going_On_and_subsequent_success"><span class="tocnumber">2.3</span> <span class="toctext"><i>What's Going On</i> and subsequent success</span></a></li>
<li class="toclevel-2 tocsection-6"><a href="#Last_Motown_recordings_and_European_exile"><span class="tocnumber">2.4</span> <span class="toctext">Last Motown recordings and European exile</span></a></li>
<li class="toclevel-2 tocsection-7"><a href="#Midnight_Love"><span class="tocnumber">2.5</span> <span class="toctext"><i>Midnight Love</i></span></a></li>
</ul>

<h2><span class="mw-headline" id="Early_career">Early_career</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="Initial_success"></span>Initial_success</h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="What's_Going_On_and_subsequent_success">What's_Going_On_and_subsequent_success</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="Last_Motown_recordings_and_European_exile">Last_Motown_recordings_and_European_exile</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="">Foo</span></h2>
<h2><span class="mw-headline" id="Midnight_Love">Midnight_Love</span></h2>




Aucun commentaire:

Enregistrer un commentaire