Мы создали центрированный горизонтальный веб-макет с анимированным эффектом прокрутки. У нас есть 5 меню, которые используют простой якорь для навигации между разными страницами. Поскольку вся страница статична, за исключением зоны body (контента), мы просто нацеливаем привязку на конкретный DIV. Так что скользит не вся страница, а только содержательная часть. Исследуемый эффект представляет собой плавную прокрутку с одной страницы на другую. Если мы нажмем на первый пункт меню, а затем на последний (5-й), все страницы будут скользить одна за другой до последней ... и до сих пор все в порядке.
Мы взяли пример кода с других сайтов (некоторые части css) и маленькие части jquery. Но когда мы нажимаем на какое-то меню, иногда оно ничего не делает, иногда не отображает хорошие слайды и, наконец, не скользит в правильном направлении (будет скользить в противоположном направлении), и мы застряли на этой части. .
HTML
<body>
<div id="menu">
<ul>
<li><a href="#menu1">Page 1</a></li>
<li><a href="#menu2">Page 2</a></li>
<li><a href="#menu3">Page 3</a></li>
<li><a href="#menu4">Page 4</a></li>
<li><a href="#menu5">Page 5</a></li>
</ul>
</div>
<div align="center" id="body">
<div id="body_wrapper">
<div class="body_content_content" id="menu1">menu1 page content</div>
<div class="body_content_content" id="menu2">menu2 page content</div>
<div class="body_content_content" id="menu3">menu3 page content</div>
<div class="body_content_content" id="menu4">menu4 page content</div>
<div class="body_content_content" id="menu5">menu5 page content</div>
</div>
</div>
</body>
CSS
#menu ul li {
display:inline;
}
#body {
width:100%;
height:200px;
margin:auto;
position:relative;
border: 0px solid red;
overflow:hidden;
top:100px;
}
#body_wrapper {
float:left;
width:500%;
padding:0;
margin:0;
height: 200px;
}
.body_content_content {
float:left;
width:20%;
height:200px;
#margin:10px 0;
position:relative;
}
.body_content_content div:first {
width:900px;
padding:20px;
margin:auto;
float:none;
}
JQUERY
$('a[href^="#"]').on('click',function(event){
var $anchor = $(this);
$('#body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
В скрипте вы можете установить CSS overflow:display; в идентификаторе #body и снова запустите скрипку, чтобы увидеть обычный div с 5 рядом один к одному div в нем.
Что ж, спасибо за помощь.
