オーバーレイは、ページが閉じられるたびに開始するように強制します。

Question

多くのオーバーレイを使用する必要があります。 オーバーレイを閉じるときに、ページが右または左に移動し、開始から来ます。 最後の2つのオーバーレイを開くことで簡単に確認できます。

これはコードです。 どこが間違っているのかわかりません。または何を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"); 
});