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>

Answer 2

您需要移除display:none内联css并将display:none添加到#box div的外部css中。 here是更新的小提琴

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

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

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

2 个答案: