javascript - 单击时显示 div 并向下滚动到它

Question

我想创建一个 div，当单击它时，会弹出另一个 div 并向下滚动到它。 Here这是我的看法，但它不起作用。正确的做法是什么？

html

<div class="image">
<img src="https://dotcms.com/contentAsset/image/47ffbc9c-f224-47a2-ba6c-  0fedb202dbe9/diagram1/filter/Scale/scale_w/500/scale_h/800">
</div>
<div id="box" style="display:none;"></div>

jquery

    $(document).ready(function() {
    $('.image').click(function() {
    $('#box').slideToggle("fast");

    $('html, body').animate({
     scrollTop: $('#box').offset().top
     }, 2000);
     });

});

Answer 1

尝试 scrollIntoView()

	$(document).ready(function() {
        $('.image').click(function() {
            $("#box").show()
             $('#box').get(0).scrollIntoView()
	  	 });
		
    });

#box{background-color:#000;height:100px;display:block;width:100%;}
.mage{display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image">
<img src="https://dotcms.com/contentAsset/image/47ffbc9c-f224-47a2-ba6c-0fedb202dbe9/diagram1/filter/Scale/scale_w/500/scale_h/800">
</div>
<div id="box" style="display:none;">
</div>