我们构建了一个居中的水平网页布局，带有动画滚动效果。我们有 5 个菜单，使用简单的 anchor 在不同页面之间导航。由于除正文(内容)区域外所有页面都是静态的，因此我们只需将 anchor 定位在特定的 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();
});
在 fiddle 中，您可以设置 CSS overflow:display;在 #body ID 中并再次运行 fiddle 以查看一个正常的 div，其中有 5 个相邻的 div。
好的，谢谢你的帮助。
最佳答案
终于有一种方法可以与简单的 jquery 插件 Jquery.LocalScroll 一起使用，而且很容易实现
您可以在此处查看作者的完整详细信息 plugin site 和 demo我们可以同时滚动“X”、“Y”甚至两者。
CSS/HTML 并没有简单地改变看起来像这样的 JavaScript JQuery block :
$.localScroll.defaults.axis = 'xy';
// Scroll initially if there's a hash (#something) in the url
$.localScroll.hash({
target: '#content', // Could be a selector or a jQuery object too.
queue:true,
duration:1500
});
$.localScroll({
target: '#body', // could be a selector or a jQuery object too.
queue:true,
duration:1000,
hash:true,
onBefore:function( e, anchor, $target ){
// The 'this' is the settings object, can be modified
},
onAfter:function( anchor, settings ){
// The 'this' contains the scrolled element (#content)
}
});
此外，您必须添加 demo 中包含的 jquery.scrollTo-min.js 和 jquery.localscroll-min.js .
my solution 现在一切正常
关于jquery - 具有动画滚动效果的居中水平网页布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19456164/