2017-03-01 193 views
1

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

尝试1

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

     element.scrollIntoView(false); 

尝试2

var element = document.getElementById("divcontent"); 
       $('#divcontent').scrollTo(element.get(0).scrollHeight); 

尝试3

var objDiv = document.getElementById("divcontent"); 
       objDiv.scrollTop = objDiv.scrollHeight; 

上述尝试所有犯规WO RK。

编辑

<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> 

的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); 
     } 


    }); 

}) 

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

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

    }, 200); 
+0

你有没有尝试什么吗?告诉我们你的代码。 –

+0

请尝试使用div和一些css –

+0

很抱歉回复迟到。附上我的代码 –

回答

2
element.scrollIntoView(false); 

如果false,元件的底部将被对准到滚动祖先的可见区域的底部。

MDN:Element.scrollIntoView()

+0

嗨,这不工作,或者我添加到错误的地方。 –

+0

我只注意到我将它添加到错误的按钮事件中。滚动现在工作 –