Question

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

$(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/horizontal-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);
   });
});

水平滚动定位div

2 个答案: