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

问题描述 投票:0回答:1

我需要无序列表的一个特定元素在页面加载时显示在列表的顶部,而不是页面的顶部。

下面的代码在Firefox和Safari上有效,但在Chrome或Opera上无效。我仅使用Javascript。

请注意,如果我删除location.replace('#'); ,该元素将在页面加载时跳到页面顶部,这是不需要的。

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>
javascript html html-lists
1个回答
0
投票

尽管可能有一种更平滑的方法,但这是解决我问题的javascript:

location.replace('#e');

setTimeout(function() {
  location.replace('#');
}, 1);
© www.soinside.com 2019 - 2024. All rights reserved.