jquery - 水平滚动定位div

Question

我是 jquery 的超级新手，我正在尝试创建一个水平滚动站点，以便当您单击导航栏上的链接时，它会将内容滚动到浏览器窗口的中心。目前我用下面的代码滚动它，但它总是将内容定位在屏幕的左侧。有没有办法抵消它，使内容scolls到中心？

$(function() {
$('ul.nav a').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollLeft: $($anchor.attr('href')).offset().left
    }, 1000);
    event.preventDefault();
});

});

HTML：

<div id="navbar">


    <ul class="nav">
    <li><a href="#slide1">Home</a></li>
    <li><a href="#slide2">Parties</a></li>
    <li><a href="#slide3">Video</a></li>
    <li><a href="#slide4">Contact</a></li>
</ul>

</div>
<div id="wrapper">
<div class="slide one" id="slide1">
</div>
</div>

CSS：

#wrapper {
width:16000px;
height:552px;

}
.slide {

height:552px;
width:1000px;
/*top: 50%;*/
left: 50%;
margin-top: 100px;
margin-left: -500px;
position:absolute;


}   

.one {

background-image:url(../images/background.png);
background-repeat: no-repeat;


}

Answer 1

从 jQuery 1.7 开始，.on() 方法是将事件处理程序附加到文档的首选方法

将 .bind() 更改为 .on() 或 .click()。

我不是 100% 确定你想要达到什么目标，我找到了一个如何创建水平滚动的教程：http://gazpo.com/2012/03/horizo​​ntal-content-scroll /。

Answer 2

检查这个例子并尝试在你的水平滚动中实现它

http://jsfiddle.net/nxcfX/

$(document).ready(function(){
   $("#MyList li:nth-child(1)").click(function(){
      $("html, body").animate({ scrollTop: 100 }, 600);
   });
   $("#MyList li:nth-child(2)").click(function(){
      $("html, body").animate({ scrollTop: 300 }, 600);
   });
   $("#MyList li:nth-child(3)").click(function(){
      $("html, body").animate({ scrollTop: 500 }, 600);
   });
   $("#MyList li:nth-child(4)").click(function(){
      $("html, body").animate({ scrollTop: 900 }, 600);
   });
});