如何防止css div彈出跳回頁面頂部

我並不十分精通JS，但我試圖用一個黑色的透明div來組織一個簡單的學校網站作爲燈箱。我使用CSS和JS來切換這個div，但是在一個長的滾動頁面上，它在打開時跳轉到頂端。這裏是我的CSS：如何防止css div彈出跳回頁面頂部

<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; 
}

這裏是JS：

var toggle2 = function() { 
    var mydiv = document.getElementById('02'); 
    if (mydiv.style.display === 'none' || mydiv.style.display === '') 
    mydiv.style.display = 'block'; 
    else 
    mydiv.style.display = 'none' 
    }

這是立即可見的鏈接，打開DIV代碼（上切換）：

<td style="float:left; width: 33%" class="school"> 
<a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)"> 
<img src="images/thumbs/chair.png" id="Image2" /></a>

這是帶有「燈箱」的代碼，可以選擇將其關閉：

<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>

請忽略所有標題，所有內容或僅針對內容的任何內容。你可以在這裏看到我的投資組合：http://www.student.nvcc.edu/home/majeffers3/，如果你注意到，當你滾動到底部並點擊一個項目時，它會跳轉到頂部。我曾經是一個很長時間的潛伏者，第一次我發佈了一個問題，因爲我似乎找不到解決方案。非常感謝您的幫助！

來源

2013-08-20 Matt Jeffers

使用'event.preventDefault（）'在你單擊處理程序的錨點元素與'href =「＃」' – Chad

您需要防止單擊鏈接時發生默認操作。要做到這一點最簡單的方法是從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)">

來源

2013-08-20 13:45:30

奇妙地工作，謝謝你！ –

確保您從onclick處理程序返回false。如果您不這樣做，超鏈接的默認動作就會啓動，這意味着您將導航到＃，這意味着當前頁面的頂部。

來源

2013-08-20 13:44:55

請更改從href="#"到href="javascript:;"。點擊時，它只是轉到「＃」鏈接。

來源

2013-08-20 13:49:34 KimKha

謝謝你的提示，我做了改變！ –

請不要使用javascript僞協議，它是較早時間的產物，並且不鼓勵。「JavaScript：僞協議不鼓勵其他選擇，比如不引人注意的事件處理程序。」 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void你應該使用黑暗獵鷹的方法。 – Chad

如何防止css div彈出跳回頁面頂部

回答

相關問題