У меня есть этот код для горизонтальной анимации страницы слева направо.Работало нормально, но вдруг перестало работать.Никаких изменений не было сделано.
Page--3 ссылка только что перестала работать, и при нажатии на ссылки Page--4 и Page--5 открывается Page--1 или Page--2.
Page--1 ссылка из работ на панели навигации Page--2 ссылкаиз navbar работает
Page--3 ссылка из navbar вообще не открывается
Page--4 открывается ссылка из navbar page--3 или Page--2
Page--5 иногда работаетиногда открывается Page--1
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style type="text/css">
html, body {
height: 100%;
/* background: linear-gradient(to left, #283048, #859398);*/
overflow: hidden;
}
.main{
margin-top: 5%;
margin-bottom: 0;
margin-right: 0;
mar`enter code here`gin-left: 0;
width: 500%;
height: 90%;
/* Mandatory for horizontal scroll */
overflow: hidden;
display: inline-flex;
white-space: nowrap;
/* Mandatory for horizontal scroll */
}
.main .card{
display: inline-block;
background: transparent;
height: 100%;
width: 100%;
}
.c-toggler{
border-color: white;
}
.navbar-dark .ham-icon{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
</style>
</head>
<body>
<div class="container container-navbar">
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">NavBar</a> <!--Brand icon here -->
<button class="navbar-toggler c-toggler" type="button" data-toggle="collapse" data-target="#navbar-div" aria-controls="navbar-div" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon ham-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-div" id="navbar-div">
<ul class="navbar-nav mr-3">
<li class="nav-item active">
<a class="nav-link" href="#page1" data-toggle="collapse" data-target=".navbar-collapse.show">Page--1 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#page2" data-toggle="collapse" data-target=".navbar-collapse.show">Page--2</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#page3" data-toggle="collapse" data-target=".navbar-collapse.show">Page--3</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#page4" data-toggle="collapse" data-target=".navbar-collapse.show">Page--4</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#page5" data-toggle="collapse" data-target=".navbar-collapse.show">Page--5</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid main">
<div class="card page1" id="page1"><h2>Page1</h2></div>
<div class="card page2" id="page2"><h2>Page2</h2></div>
<div class="card page3" id="page3"><h2>Page3</h2></div>
<div class="card page4" id="page4"><h2>Page4</h2></div>
<div class="card page5" id="page5"><h2>Page5</h2></div>
</div>
<!-- Bootstrap and jQuery Scripts-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("body").css("overflow" , "hidden");
$('a[href^="#page"]').on('click' , function(){
event.preventDefault();
// Horizontal Scroll
$('html, body').animate({scrollLeft: $($(this).attr('href')).offset().left} , 1000);
});
});
</script>
</body>
</html>