0

幅と高さが設定され、オーバーフローがスクロールに設定されたコンテナ 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' );
});
4

1 に答える 1

1

メソッドはありません。引き続き値を使用して反転scrollRightする必要があります。scrollLeft

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

フィドル

于 2013-03-22T20:18:31.040 に答える