我正在尝试在 DIV 内进行水平滚动锚定。如果我只是为整个 body 标签设置动画，似乎可以工作，但似乎在 DIV 中对我不起作用。
这是 JavaScript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('#wrapper').animate({scrollLeft:$(this.hash).offset().left}, 500);
});
});
</script>
这是 Html
<body>
<div id="wrapper">
<div id="wrappercontent">
<div id="section1" class="section">
<img src="images/big_head.png" />
</div>
<div id="section2" class="section">
<img src="images/whatis.png" />
</div>
<div id="section3" class="section">
<h2>Section 3</h2>
<p>
blahblahblabh
</p>
</div>
</div>
<div id="nav">
<li><a href="#section1" class="scroll">1</a></li>
<li><a href="#section2" class="scroll">2</a></li>
<li><a href="#section3" class="scroll">3</a></li>
</div>
</div>
</body>
这是样式表
*{
margin:0;
padding:0;
}
body{
background:#f0efe4;
letter-spacing:-1px;
font-family:Georgia;
font-size: 34px;
font-style: italic;
width:12000px;
}
#wrapper{
width:1000px;
height:700px;
overflow:scroll;
}
#wrappercontent{
height:auto;
width:12000px;
}
#nav{
z-index:1;
position:fixed;
}
.section{
margin:0px;
bottom:0px;
width:4000px;
float:left;
height:100%;
text-shadow:1px 1px 2px #f0f0f0;
}
它的行为很奇怪。请帮忙
最佳答案
您只需在计算中考虑当前滚动位置:
scrollLeft: $('#wrapper').scrollLeft() + $(this.hash).offset().left
关于javascript - 在 DIV 内水平滚动动画表现得很奇怪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14016865/