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>

脚本

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

以下是JSFIDDLE.

这里我想要的是当我点击id为'heading'的h2时，'main_container'div应滚动到'second_div'。

谁能告诉我怎么做？

Answer 1

你可以试试这个

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

JSFiddle

Answer 2

使用animate()下面的Demo Here

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

Answer 3

由于您的容器设置为200％宽，因此您需要设置-100％的动画，如下所示：

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

演示@ fiddle

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

3 个答案: