如何在 div 内的 div 上单击鼠标左键

Question

我有一个容器 div，它设置了宽度和高度，并且溢出设置为滚动。在该 div 中是另一个我可以滚动的内容 div。我想添加将自动滚动到特定点（以像素为单位）的导航元素。我目前正在使用 Jquery 并没有得到任何地方。任何帮助都会很棒！

这是我的 HTML

<button class="scrollto"  style="position:fixed; top:100px;left:200px; width:150px;   height:50px; z-index:3;">purple_lamp</button>

<div id="container" >
  <div id="main_content">
    <img id="urban_chic" src="images/bg.jpg" />
    <img id="purple_lamp" src="images/purple_lamp.png" data-stellar-ratio="1.5"/>
    <img id="sofa" src="images/sofa.png" data-stellar-ratio="1.5"/>
    <img id="wall_clock" src="images/jacobs_wall_clock.png" data-stellar-ratio="1.5"/>
    <img id="yellow_shoe" src="images/yellow_shoe.png"  data-stellar-ratio="1.5" />
    <img id="intro" src="images/intro.jpg" />
  </div>
</div>

这是我的 CSS

#container{
  height:768px;
  width:1024px;
  position:absolute;
  overflow:scroll;
}

#main_content{
  height:768px;
  width: 5454px;
  position:absolute;
}

还有我的 JS

$('.scrollto').click(function() {
    $('#container').animate( { scrollRight: '+=500' }, 1000, 'easeOutQuad' );
});

Answer 1

没有scrollRight 方法，您仍然需要使用scrollLeft 并反转值：

$('.scrollto').click(function() {
    $('#container').animate( { scrollLeft: '-=500' }, 1000, 'easeOutQuad' );
});

FIDDLE