javascript - 溢出滚动停止在选定的点

Question

我有一个侧边栏，其中列出了所有公司的缩略图。这个想法是您向下滚动列表并选择一个缩略图。一旦选择了缩略图，它就会显示为“事件”，因此具有更高的不透明度，然后显示该特定页面。

<div class="main_scroll">
    <ul>
        <li class="block1"><a class="active" href="Link here"><img src="#" height="100" width="140" alt="Absolute" /></a></li>
        <li class="block2"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="AMT" /></a></li>
        <li class="block2"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="Atlas" /></a></li>
        <li class="block2"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="Bellows" /></a></li>
        <li class="block1"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="Bosman" /></a></li>
        <li class="block5"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="BWT" /></a></li>
        <li class="block3"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="Calorstat" /></a></li>
        <li class="block3"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="Composites" /></a></li>
        <li class="block6"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="Connecticut" /></a></li>
        <li class="block3"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="Damar" /></a></li>
        <li class="block4"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="Ermeto" /></a></li>
        <li class="block4"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="Jet" /></a></li>
        <li class="block6"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="Senior" /></a></li>
        <li class="block2"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="Metal Bellows" /></a></li>
        <li class="block3"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="Mexico" /></a></li>
        <li class="block4"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="SSP" /></a></li>
        <li class="block1"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="Weston" /></a></li>
        <li class="block1"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="Thermal" /></a></li>
        <li class="block1"><a class="low" href="Link here"><img src="#" height="100" width="140" alt="Weston" /></a></li>
    </ul>


</div>

JSFiddle - http://jsfiddle.net/FCzVP/

我的问题是，一旦我点击了缩略图“Calorstat (eg)”， ScrollView 就会回到顶部，用户看不到“Calorstat”是完全不透明的还是被选中的。这是一个网络应用程序要清楚。

我假设我需要使用 jQuery/Javascript 来获得所需的效果？？任何反馈都会很棒!

谢谢

Answer 1

删除 href(attr),所以点击 href="#"浏览器会搜索一个内部 ID，这样它就会转到网页的开头，我想是这样的:D