css - 绝对/相对位置尝试强制滚动条到页面顶部

Question

所以我一直在努力掌握绝对和相对定位的诀窍。关于这个主题有很多教程和问题，我已尽力理解它们。除了这一点，我大部分时间都很好。我正在创建一个页面，其中有较小的缩略图图像，用户可以选择单击并展开图像。为此，我只使用了一个隐藏层，其中包含仅在用户单击图像时才会出现的较大图像。我已经让这部分工作得很好。我的问题是，如果我在页面上向下滚动一些并单击图像，滚动条会在显示隐藏的 div 之前跳到页面顶部。我的印象是它只在您使用绝对定位(相对于窗口，而不是 div anchor )时才这样做。它出现在我想要的位置，但它跳到屏幕顶部。我环顾四周，找不到解决我确切问题的方法。提前致谢。

HTML/CSS 代码:

<a href="#" onclick="enlarge2()">
<img src="http://www.myadverket.com/images/smallemail.png" style="border: 2px solid  
#E0E0E0">
</a>
<div style="position: relative">
<div id="image2" style="position: absolute; top: 0px; right: 200px; width: 100%;  
height: 100%; vertical-align: middle; visibility: hidden">
....Content....
</div>
</div>

Javascript:

function enlarge2() {
var image = document.getElementById("image2");
image.style.visibility = "visible";
}

Answer 1

看区别

<script>
    function test(){
        //onclick event stuff 
    }
</script>
<div style="height:3000px">a</div>
<a href="#" onclick="test(); return false;"> link1 <!-- will work as expected --> </a> 
<a href="#" onclick="test();">link2 <!--will scrollup --> </a>
<a id="cometome" href="#" onclick="test(); return false;"> link3 <!-- will not scroll --> </a>
<div style="height:3000px">b</div>
<a href="#cometome">scroll to link3!</a>
<a href="#">scroll to top!</a>