Javascript 如何防止css div弹出窗口跳回页面顶部

Javascript 如何防止css div弹出窗口跳回页面顶部,javascript,css,html,Javascript,Css,Html,我一点也不精通JS,但我正试图为学校建立一个简单的公文包网站,用一个黑色透明的div作为灯箱。我使用CSS和JS来切换这个div,但是在一个长的滚动页面上,当打开它时,它会跳到顶部。以下是我的CSS: <style type="text/css"> div.transbox{ width:100%; height:100%; margin:0px 0px; position:fixed; background-color:#000000; background

我一点也不精通JS,但我正试图为学校建立一个简单的公文包网站,用一个黑色透明的div作为灯箱。我使用CSS和JS来切换这个div,但是在一个长的滚动页面上,当打开它时,它会跳到顶部。以下是我的CSS:

<style type="text/css">
div.transbox{
  width:100%;
  height:100%;
  margin:0px 0px;
  position:fixed;
  background-color:#000000;
  background:rgba(0,0,0,0.75);
  z-index:99;
}
p.ptransbox{
    width:400px;
    padding:5px;
    position:relative;
    background:rgba(255,255,255,0.5);
    color:#000;
    border-radius:5px;
}
img.itransbox{
    padding:10px;
    position:relative;
    background:rgba(255,255,255,0.5);
    border-radius:5px;
}
这是可立即作为打开div的链接查看的代码(切换打开):


这是打开“lightbox”的代码,可以选择将其关闭:

<a href="#" onclick="toggle2();">
<div align="center" id="02" class="transbox" style="display: none;">
<p><img class="itransbox" src="images/anti-thumbs/chair.jpg" /></p>
<p class="ptransbox"><strong>Wörner Hall</strong>, 2010</p></div></a>


请忽略所有标题、Alt或任何特定于内容的内容。你可以在这里看到我的作品集:如果你注意到,当你滚动到底部并点击一个项目时,它会跳到顶部。我已经潜伏了很长时间,这是我第一次发布问题,因为我似乎找不到解决办法。非常感谢你的帮助

确保从onclick处理程序返回false。如果不这样做,超链接的默认操作将启动,这意味着您将导航到#,这意味着当前页面的顶部。

请确保从onclick处理程序返回false。如果不这样做,超链接的默认操作将启动,这意味着您将导航到#,这意味着当前页面的顶部。

您需要防止在单击链接时执行默认操作。最简单的方法是从
onclick
处理程序返回
false

<a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2(); return false;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)">

您需要防止在单击链接时发生默认操作。最简单的方法是从
onclick
处理程序返回
false

<a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2(); return false;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)">


请将
href=“#”
更改为
href=“javascript:;”
。单击时只需转到“#”链接。

请将
href=“#”
更改为
href=“javascript:;”
。单击时只需转到“#”链接。

使用
event.preventDefault()
中使用
href=“#”
Use
event.preventDefault()
中使用
href=“#”
的锚元素的单击处理程序请不要使用javascript伪协议,这是早期的产物,不受欢迎。“不鼓励使用javascript:pseudo协议而不是其他替代方案,例如不引人注目的事件处理程序。”-您应该使用Dark Falcon的方法。请不要使用javascript pseudo协议,它是早期的产物,不鼓励使用。“与其他替代方案相比,javascript:pseudo协议是不可取的,例如不引人注目的事件处理程序。”-您应该使用Dark Falcon的方法。
<a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2(); return false;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)">