如何使 Div 滚动到底部

MVC*_*bie 6 javascript jquery scroll

我有一个文本框和一个按钮。在 div 内的表格中按下添加按钮后。当max-height:100px;超出的overflow-y:auto; addbarcode();方法是一个 ajax 帖子时,我希望 div 滚动到页面底部,它将调用 jquerydataTable method来填充服务器端的数据。

尝试 1

var element = document.getElementById("divcontent");

        element.scrollIntoView(false);
Run Code Online (Sandbox Code Playgroud)

尝试 2

 var element = document.getElementById("divcontent");
                $('#divcontent').scrollTo(element.get(0).scrollHeight);
Run Code Online (Sandbox Code Playgroud)

尝试 3

 var objDiv = document.getElementById("divcontent");
                objDiv.scrollTop = objDiv.scrollHeight;
Run Code Online (Sandbox Code Playgroud)

以上尝试均无效。

编辑

<div class="row" id="divcontent" style="max-height:100px; overflow-y:auto">

<div class="col-md-12 col-sm-12">
    <table class="table table-striped table-responsive" id="codelist">
        <thead>
            <tr>
                <th>
                    SN
                </th>
                <th>
                    Serial Number
                </th>

            </tr>
        </thead>
    </table>


</div>
Run Code Online (Sandbox Code Playgroud)

Javascript

$(document).ready(function () {
    $("#scanner").on('keyup paste', function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13) { //Enter keycode
            var artno = $(this).val();
            if (artno.length == 32 && ) {
                addbarcode();
                $(this).val("");

            } else {
                $(this).val("");
            }
            var element = document.getElementById("divcontent");

            element.scrollIntoView(false);
        }


    });

})
Run Code Online (Sandbox Code Playgroud)

最终工作代码 添加了动画以允许平滑滚动。还添加了计时器,因为 ajax 代码运行速度比 html 渲染速度快。因此设置一点延迟可以让 javascript 捕获全高。

  function divscrolldown() {
    setTimeout(function () {
        $('#divcontent').animate({
            scrollTop: $("#divcontent").offset().top
        }, 500);

    }, 200);
Run Code Online (Sandbox Code Playgroud)

And*_*kyi 12

element.scrollIntoView(false);
Run Code Online (Sandbox Code Playgroud)

如果false,则元素的底部将与可滚动祖先的可见区域的底部对齐。

MDN:Element.scrollIntoView()