我如何使用溢出Y滚动到div中的元素

Question

我有一个div，其max-height设置为300px，因此，只要其内容超过该数量，它就会显示一个滚动条。 现在，我希望能够单击一个按钮并滚动到该div中的一个元素。 我知道我可以设置主滚动条，但是我不确定是否可以操纵为div容器生成的滚动条。

我的HTML看起来像这样：

<div style="min-height: 300px; max-height: 300px; overflow: hidden" class="card-block pt-0 pb-0">
        <div class="row" style="min-height: 300px; max-height: 300px;">
            <div class="col-5" style="overflow-y: auto; min-height: 300px;border-right: 1px solid rgba(0, 0, 0, 0.125); min-height: 300px; max-height: 300px;">
                <div class="pt-3 pb-3" style=" max-height: 300px;">
                    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                    <div id="scroll-here">content</div>
                </div>
            </div>
        </div>
    </div>

是否可以滚动到ID为“ scroll-here”的div？

如果有任何帮助，我正在使用Angular 5和Bootstrap 4。

Answer 1

使用此代码滚动到跨度

$(#id_of_div_with_scroll).scrollTop($("#your_span_id").offset().top);

Answer 2

只是：

 <a href="#scroll-here">Click me</a> <div style="min-height: 300px; max-height: 300px; overflow: hidden" class="card-block pt-0 pb-0"> <div class="row" style="min-height: 300px; max-height: 300px;"> <div class="col-5" style="overflow-y: auto; min-height: 300px;border-right: 1px solid rgba(0, 0, 0, 0.125); min-height: 300px; max-height: 300px;" id="scroll-container"> <div class="pt-3 pb-3" style=" max-height: 300px;"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="scroll-here">content</div> </div> </div> </div> </div> 

或者，如果您希望将其设置为动画，则：

 $('button').click(function() { $("#scroll-container").animate({ scrollTop: $('#scroll-here').offset().top }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Click me</button> <div style="min-height: 300px; max-height: 300px; overflow: hidden" class="card-block pt-0 pb-0"> <div class="row" style="min-height: 300px; max-height: 300px;"> <div class="col-5" style="overflow-y: auto; min-height: 300px;border-right: 1px solid rgba(0, 0, 0, 0.125); min-height: 300px; max-height: 300px;" id="scroll-container"> <div class="pt-3 pb-3" style=" max-height: 300px;"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="scroll-here">content</div> </div> </div> </div> </div>