Overlay強制頁面在關閉時開始啓動

Question

我必須使用很多重疊，所以 當我關閉重疊時，無論是向右還是向左，我的頁面向上移動並從開始。可以通過打開最後兩個覆蓋層來輕鬆檢查它。

這是代碼。 我不知道哪裏是錯誤的。或者我應該添加更多的CSS。 由於我選擇的位置固定，可能是這是錯誤，但如果改變它比發生更多的錯誤。

$(document).ready(function(){ 

左側覆蓋

$("#left-click1").click(function(){ 
$("#image").prop("src","C:/Users/Ahsan/Documents/sublime/nature1.jpg"); 
$("#para").text("1111ABCD"); 
}); 

$("#left-click2").click(function(){ 
$("#image").prop("src","C:/Users/Ahsan/Documents/sublime/nature2.jpg"); 
$("#para").text("2222ABCDEF"); 
}); 

右側覆蓋

$("#right-click1").click(function(){ 
    $("#image1").prop("src","C:/Users/Ahsan/Documents/sublime/nature3.jpg"); 
    $("#para1").text("3333ABCDEF"); 
    }); 

    $("#right-click2").click(function(){ 
     $("#image1").prop("src","C:/Users/Ahsan/Documents/sublime/nature4.jpg"); 
     $("#para1").text("4444ABCDEF"); 
    }); 

    $("#right-click3").click(function(){ 
     $("#image1").prop("src","C:/Users/Ahsan/Documents/sublime/nature5.jpg"); 
     $("#para1").text("4444ABCDEF"); 
    }); 

    function openAnimeleft(){ 
    document.getElementById("left").style.width = "60%"; 
} 

function closeAnimeleft(){ 
    document.getElementById("left").style.width = "0"; 
} 

右側動畫

function openAnimeright(){ 
    document.getElementById("right").style.width = "60%"; 
} 

function closeAnimeright(){ 
    document.getElementById("right").style.width = "0"; 
} 

<div id="left" class="left-styles"> 
<a href="#" class="cross-button" onclick="closeAnimeleft()">&times;</a> 
<div> 
<div> 
    <img id="image"> 
</div> 
<div> 
    <p id="para"></p> 
</div> 
</div> 
</div> 

左側動畫DIV

<div id="mains"><p>00000001</p> 
<span id="left-click1" onclick="openAnimeleft()"> &#187;&#187; left-open1</span> 
</div> 

<div id="mains"><p>00000002</p> 
<span id="left-click2" onclick="openAnimeleft()"> &#187;&#187; left-open2</span> 
</div> 

右側動畫的div

<div id="right" class="right-styles"> 
    <a href="#" class="cross-button" onclick="closeAnimeright()">&times;</a> 
<div> 
<div> 
<img id="image1"> 
</div> 
<div> 
<p id="para1"></p> 
</div> 
</div> 
</div> 
<div id="mains"><p>00000003</p> 
<span id="right-click1" onclick="openAnimeright()">&#171;&#171; right-open1</span> 
</div> 

<div id="mains"><p>00000004</p> 
<span id="right-click2" onclick="openAnimeright()">&#171;&#171; right-open2</span> 
</div> 

<div id="mains"> 
<p>00000005</p> 
<span id="right-click3" onclick="openAnimeright()">&#171;&#171; right-open3</span> 
</div> 

CSS代碼

.left-styles { 

    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: #111000; 
    overflow: hidden; 
    transition: 0.5s; 
    padding-top: 60px; 
} 

.left-styles a ,.right-styles a{ 
    text-decoration: none; 
    color: white; 
    transition: 1s; 
} 

#right-click1,#right-click2,#right-click3,#left-click1,#left-click2{ 
    font-size: 30px; 
    cursor: pointer; 
} 

@media screen and (max-height: 450px) 
{ 

    .left-styles {padding-top: 15px;} 
    .left-styles a {font-size: 18px;} 
    .right-styles {padding-top: 15px;} 
    .right-styles a {font-size: 18px;} 
} 
.right-styles { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    right: 0; 
    background-color: #111000; 
    overflow: hidden; 
    transition: 0.5s; 
    padding-top: 60px; 
} 
.right-styles .cross-button, .left-styles .cross-button { 
    position: absolute; 
    top: 10px; 
    right: 25px; 
    font-size: 36px; 
    margin-left: 50px; 
} 

.right-styles a:hover, .left-styles a:hover{ 
    color: green; 
} 

#para,#para1{ 
    color: green; 
    font-size: 20px; 
    margin: 5vw; 

} 

#image,#image1{ 
    width: 50vw; 
    height: 50vh; 
    margin-left: 6%; 
} 

#left,#right{ 
    overflow: scroll; 
} 

#mains{ 
    height: 200px; 
} 

Answer 1

如果我理解正確的話，當你點擊關閉按鈕頁面跳轉到滾動窗口的頂部。如果這是問題，則需要使用event.preventDefault();。這會阻止a標記的行爲像鏈接一樣。

$("#left-click1").click(function(event){ 
event.preventDefault(); 
$("#image").prop("src","C:/Users/Ahsan/Documents/sublime/nature1.jpg"); 
$("#para").text("1111ABCD"); 
});