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