如何滚动div onclick向左或向右？

Question

HTML

<div class="main_container">
<div class="first_div">
<div class="first_container_box">
<h1>Heading 1</h1>
<h2 id="heading">Heading 2</h2>
<h2>Heading 2</h2>
</div>
</div>
<div class="second_div">
<div class="second_container_box">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h2>Heading 2</h2>
</div>
</div>
</div>

Script

$(document).ready(function(){
    $("#heading").click(function(){
       $('.main_container').animate({left:'+100px'}, 1000);
    });
});​

Here is the JSFIDDLE.

Here what I want is when I click on h2 with id 'heading', 'main_container' div should scroll towards the 'second_div'.

Can anyone please tell me how to do it??

Answer 1

You can try this

$(document).ready(function(){
    $("#heading").click(function(e){
        e.preventDefault();
        $('body').animate({scrollLeft:'+=500'}, 500);
    });
});

JSFiddle

Answer 2

Use this animate() like below Demo Here

$(document).ready(function(){
    $("#heading").click(function(){
          $('body').animate({scrollLeft:'500%'}, 'slow');
    });
});

Answer 3

Since your container is set to 200% wide, you need to animate by -100%, like below:

$("#heading").click(function() {
    $('.main_container').animate({marginLeft:'-100%'}, 500);
});

Demo@ fiddle