使用scrollTop：tableRow.offset（）。頂部內滾動div，只顯示從頂部可見的距離

Question

我想使用動畫函數滾動到表的特定行。當可滾動div處於頂部時它工作正常，但當我從頂部滾動時，它只能看到看起來可見的頂部。

我在對話框（Bootstrap Modal窗口）中使用這個。有沒有辦法讓距離頂部的距離不只是可見？下面

HTML代碼是一個asp.net mvc4部分類，進入一個引導模態窗口（對話框）的一部分：

 <div id="LocationNumberModalAllLocations" style="Margin-top: -9px"> 
     <div class="container"> 
     <div class="row row-eq-height"> 
     <div class="col-sm-12 col-md-4"> 
     <div id="LocationNumberModalAllLocationsSelectionContainer"  class="ModalResultsTable"> 
      <table id="locationList" class="table table-hover table-condensed"> 
      <thead> 
      <tr> 
       <th>Location</th> 
       <th>Items</th> 
      </tr> 
      </thead> 
      <tbody> 
      </tbody> 
      </table> 
     </div> 
     </div> 
    <div class="col-sm-12 col-md-8 modalTableColumnCanvas"> 
    <center><div id="control" style="Margin:-11px 0 5px 0"> 
     Go to location: <input type="text" size="10" id="GoToLocationInput" /> <button onclick='gotoLocation()'> Go </button> 
    </div></center> 
     <div class="modalTableCanvas"> 
     <div class="ModalSelectedTable">  
     <center><h4>Selected Location's Inventory</h4></center> 
     </div> 
     <table class="table table-hover table-condensed"> 
     <thead> 
      <tr> 
      <th>Part Number</th> 
      <th>Condition</th> 
      <th>Quantity</th> 
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
    </table> 
    </div> 
    </div> 
    </div> 
    </div> 
</div> 

這裏是我的jQuery代碼。

function gotoLocation() { 

    //check if value exists 
    var tableOfLocations = $('#locationList'); 
    var location = $('#GoToLocationInput').val(); 
    var tableRow = $('#locationList tbody tr td').filter(function() { 
     return $(this).text() == location; 
    }); 

    if (tableRow.length) { 
     var container = $('#LocationNumberModalAllLocationsSelectionContainer'); 
     var height = container.height(); 
     var tableRowPosition = tableRow.offset().top; 
     container.animate({ scrollTop: tableRowPosition - (height/2) }, 1000); 
    } 
} 

示例： jsfiddle.net/eaglei22/vgutew90

Answer 1

這似乎是對我工作的解決方案，我不知道這是否是最好的，但它似乎快和做我所需要的。這裏是新的Javascript：

function gotoLocation() { 

    //check if value exists 
    var tableOfLocations = $('#locationList'); 
    var location = $('#GoToLocationInput').val().trim().toUpperCase(); 


    if($("#Active").length) 
    { 
     var textVal = $("#Active").children().eq(0).text(); 
     if(textVal == location) 
     { 
      return; 
     } 
    } 
    //remove old active row 
    var tableRow = $('#locationList tbody').find('tr').removeAttr("id"); 
    tableRow.removeAttr("style"); 

    var tableRow = $('#locationList tbody tr td').filter(function() { 
     return $(this).text().toUpperCase() == location; 
    }).parent(); 

    tableRow.attr("id","Active"); 
    tableRow.css({'background-color': '#e8e8e8'}); 

    if (tableRow.length) { 
     var container = $('#LocationNumberModalAllLocationsSelectionContainer'); 
     var height = container.height(); 
     container.scrollTop(0); 
     var tableRowPosition = tableRow.offset().top; 
     container.animate({ scrollTop: tableRowPosition - (height/1.5) }, 500); 
    } 
} 

如果請求相同的值，最後選擇，什麼都不會發生。如果請求新的值表將從頂部滾動到匹配的行。