如何使列表 go 的一个元素在页面加载时位于顶部？

Question

I need one particular element of an unordered list to appear at the top of the list on page load, but not at the top of the page.

My code below works on Firefox and Safari, but not on Chrome or Opera. I use Javascript only.

Note that if I remove location.replace('#'); , the element will jump to the top of the page on page load, which is unwanted.

 location.replace('#e'); location.replace('#');

 #e { color:#fff; background:red; } #list { overflow:auto; height:100vh; border:1px solid #000; }

 <div>LOGO</div> <ul id="list"> <li id="a">Link a</li> <li id="b">Link b</li> <li id="c">Link c</li> <li id="d">Link d</li> <li id="e">Link e</li> <li id="f">Link f</li> <li id="g">Link g</li> <li id="h">Link h</li> <li id="i">Link i</li> <li id="j">Link j</li> <li id="k">Link k</li> <li id="l">Link l</li> <li id="m">Link m</li> <li id="n">Link n</li> <li id="o">Link o</li> <li id="p">Link p</li> <li id="q">Link q</li> <li id="r">Link r</li> <li id="s">Link s</li> <li id="t">Link t</li> <li id="u">Link u</li> <li id="v">Link v</li> <li id="w">Link w</li> <li id="x">Link x</li> <li id="y">Link y</li> <li id="z">Link z</li> <li id="aa">Link aa</li> <li id="ab">Link ab</li> <li id="ac">Link ac</li> <li id="ad">Link ad</li> <li id="ae">Link ae</li> <li id="af">Link af</li> <li id="ag">Link ag</li> <li id="ah">Link ah</li> <li id="ai">Link ai</li> <li id="aj">Link aj</li> <li id="ak">Link ak</li> <li id="al">Link al</li> <li id="am">Link am</li> <li id="an">Link an</li> <li id="ao">Link ao</li> <li id="ap">Link ap</li> <li id="aq">Link aq</li> <li id="ar">Link ar</li> <li id="as">Link as</li> <li id="at">Link at</li> <li id="au">Link au</li> <li id="av">Link av</li> <li id="aw">Link aw</li> <li id="ax">Link ax</li> <li id="ay">Link ay</li> <li id="az">Link az</li> </ul>

Answer 1

Although there is probably a smoother way to do it, here is the javascript that solves my issue:

location.replace('#e');

setTimeout(function() {
  location.replace('#');
}, 1);