單擊顯示div並向下滾動到它

Question

我想創建一個div，當單擊它時，它會彈出另一個div並向下滾動到它。 這是我的看法，但是沒有用。 正確的方法是什么？

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> 

Answer 2

您需要刪除display:none內嵌CSS，並將display:none添加到#box div的外部CSS中。 這是更新的小提琴

<div id="box">
</div>

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